在 Yii2 中使元素可拖动

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 中使元素可拖动

make element dragable in Yii2

php

jquery

jquery-ui-draggable

yii2