要素を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が同様にあなたのメインのレイアウトファイルとコンソールにエラーに登録されていることを確認する必要があります。

ビューファイルで、矛盾を避けるためにカスタムCSSとJSコードを追加するには、$this->registerJs()と$this->registerCss()を使用してください。ビューファイルは以下のようになります。

<?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をご覧ください。