rendre élément dragable dans Yii2

Question

Je veux faire un élément draggable dans l'application avance yii2. En PHP ou simplement un exemple HTML comme http://jqueryui.com/draggable. J'essaye dans Yii2 mais ça n'a pas marché. Quelqu'un peut-il m'aider s'il vous plaît? c'est le code de la page d'affichage.

<?php 

/* @var $this yii\web\View */ 

use yii\helpers\Html; 

$this->title = 'Generate Table'; 
$this->params['breadcrumbs'][] = $this->title; 
?> 
<div class="site-generateTable"> 
    <h1><?= Html::encode($this->title) ?></h1> 
    <p>Test for drag and drop function</p> 


<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 
    </div> 
<style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    }); 
    </script> 

et l'actif d'application est quelque chose comme ça

<?php 

namespace frontend\assets; 

use yii\web\AssetBundle; 

/** 
* Main frontend application asset bundle. 
*/ 
class AppAsset extends AssetBundle 
{ 


public $basePath = '@webroot'; 
    public $baseUrl = '@web'; 
    public $css = [ 
     'css/site.css', 
     'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' 

    ]; 
    public $js = [ 'http://code.jquery.com/jquery-1.10.2.js'  , 
     'http://code.jquery.com/ui/1.11.4/jquery-ui.js', 

    ]; 
    public $depends = [ 
     'yii\web\YiiAsset', 
     'yii\bootstrap\BootstrapAsset', 
    ]; 
} 

Désolé mon anglais est pas tout à fait bon.

Answer 1

Vous ne voulez plus ajouter les bibliothèques jQuery et jQueryUi, elles sont déjà disponibles dans Yii2. Vous devez changer votre AppAsset à quelque chose comme ci-dessous.

<?php 

namespace frontend\assets; 

use yii\web\AssetBundle; 

/** 
* Main frontend application asset bundle. 
*/ 
class AppAsset extends AssetBundle 
{ 
    public $basePath = '@webroot'; 
    public $baseUrl = '@web'; 
    public $css = [ 
     'css/site.css', 
    ]; 
    public $js = [ 
     '...' 
    ]; 
    public $depends = [ 
     'yii\web\YiiAsset', 
     'yii\jui\JuiAsset', 
     'yii\bootstrap\BootstrapAsset', 
    ]; 
} 

Note: Vous devez vous assurer que votre AppAsset est enregistré dans votre fichier de mise en page principale et des erreurs dans la console ainsi.

Dans votre fichier de vue, utilisez $this->registerJs() et $this->registerCss() pour ajouter des codes CSS et JS personnalisés afin d'éviter les conflits. Le fichier de vue pourrait être quelque chose comme ceci ci-dessous.

<?php 

/* @var $this yii\web\View */ 

use yii\helpers\Html; 

$this->title = 'Generate Table'; 
$this->params['breadcrumbs'][] = $this->title; 
?> 
<div class="site-generateTable"> 
    <h1><?= Html::encode($this->title) ?></h1> 
    <p>Test for drag and drop function</p> 

    <div id="draggable" class="ui-widget-content"> 
     <p>Drag me around</p> 
    </div> 
</div> 
<?php 
$css = <<< CSS 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
CSS; 
$js = <<< JS 
    $(function() { 
     $("#draggable").draggable(); 
    }); 
JS; 
$this->registerCss($css); 
$this->registerJs($js); 

J'espère que cela va vous aider à résoudre votre problème. Si vous voulez changer la version des bibliothèques jQuery et jQuery, vous pouvez regarder le guide.