Php 使元素在Yii2中可拖动

我想在yii2高级应用程序中制作一些可拖动的元素。在PHP或简单的HTML示例中，如下所示。我试着用Yii2，但没用。有人能帮我吗？ 这是查看页面代码

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

拖放功能测试

把我拖来拖去

#可拖动{宽度：150px；高度：150px；填充：0.5em；}
$（函数（）{
$（“#可拖动”）.draggable（）；
});

应用程序资产是这样的

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

---

您不想再次添加jQuery和jQueryUi库，它已经在Yi2中可用了。您需要将
AppAsset
更改为以下内容

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

我希望这能帮助你解决你的问题。如果要更改jQuery和jQuery库的版本，可以查看。
如果不想再次添加jQuery和jQueryUi库，Yii2中已经提供了它。您需要将
AppAsset
更改为以下内容

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

我希望这能帮助你解决你的问题。如果您想更改jQuery和jQuery库的版本，可以查看。
谢谢。注意：实际上，在安装Jquery UI之后，我不必再添加“yii\jui\JuiAsset”。但当我添加“yii\jui\JuiAsset”时，它也会起作用。欢迎您，很高兴它能帮助您。我认为最好使用
yii\jui\JuiAsset
而不是手动添加到资产中。是的。我已经加上了谢谢你。注意：实际上，在安装Jquery UI之后，我不必再添加“yii\jui\JuiAsset”。但当我添加“yii\jui\JuiAsset”时，它也会起作用。欢迎您，很高兴它能帮助您。我认为最好使用
yii\jui\JuiAsset
而不是手动添加到资产中。是的。我已经加上了D