сделать элемент перетаскиваемым в Yii2
Я хочу сделать какой-нибудь перетаскиваемый элемент в приложении yii2 advance. В 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',
];
}
Извините, мой английский не совсем хорош.
Решение
Вы не хотите снова добавлять библиотеки 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, вы можете взглянуть на руководство.
Другие решения
Других решений пока нет …