Question

我想在yii2高级应用程序中制作一些可拖动的元素。在PHP或简单的HTML示例中，就像http://jqueryui.com/draggable一样。我在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>

并且应用程序资产就是这样的

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

抱歉，我的英语不太好。

Answer 1

您不想再次添加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',
    ];
}

注意：您需要确保AppAsset已在主布局文件中注册，并且还需要在控制台中注册任何错误。

在您的视图文件中，使用$this->registerJs()和$this->registerCss()添加自定义CSS和JS代码以避免冲突。视图文件可能如下所示。

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

我希望这可以帮助您解决问题。如果要更改jQuery和jQuery库的版本，可以查看guide。

使元素在Yii2中可拖动

1 个答案: