php - make element dragable in Yii2 -

i want make draggable element in yii2 advance application. in php or html example http://jqueryui.com/draggable. try in yii2 didn't work. can me please? view page code.

 <?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 drag , 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> 

and application asset this

<?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',     ]; } 

sorry english not quite good.

you don't want add jquery , jqueryui libraries again, it's available in yii2. need change appasset below.

<?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: need make sure appasset registered in main layout file , errors in console well.

in view file use $this->registerjs() , $this->registercss() add custom css , js codes avoid conflicts. view file below.

<?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 drag , 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); 

i hope solve problem. if want change version of jquery , jquery libraries may have @ guide.