YII的拖动组件CJuiDraggable 和CJuiDroppable 的用法

最新推荐文章于 2020-12-06 00:00:03 发布

xiangpingeasy

最新推荐文章于 2020-12-06 00:00:03 发布

阅读量622

点赞数

CC 4.0 BY-SA版权

分类专栏： YII框架

本文链接：https://blog.youkuaiyun.com/u013718071/article/details/21790945

YII框架专栏收录该内容

87 篇文章

订阅专栏

本文介绍如何利用CJuiDraggable和CJuiDroppable插件在Web应用中实现UI组件的拖放功能，并通过示例展示了如何创建一个可接受拖放的Droppable区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CJuiDraggable可以使包含着其中的其它UI组件实现拖放功能，它封装了 JUI Draggable插件。

CJuiDroppable表示某个区域可以接受拖拉过来的UI组件，它封装了 JUI Droppable插件。

我们修改上例，添加一个Droppable区域，当有UI组件拖放到该区域时，显示“Dropped”。

代码如下：

<?php $this->beginWidget('zii.widgets.jui.CJuiDroppable', array(
	'options'=>array(
				'drop'=>'js:function(event,ui){$(this).html("Dropped!")}',
				),
			'htmlOptions'=>array(
				'style'=>'width: 300px; height: 300px; padding: 
				5px; border: 1px solid #e3e3e3; background: #f7f7f7',
				),
			));
echo 'Drop here';

$this->endWidget();
?>

<br />
		
<?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
	'options'=>array(
				'cursor'=>'move',
				),
				'htmlOptions'=>array(
					'style'=>'width: 200px; height: 200px; 
					 padding: 5px; border: none solid #e3e3e3; 
					 background: #0'
					),
			));
$url=IMG_URL."start_on.png";
echo "<img src='".$url."'//>";

$this->endWidget();
?>

参考文章：http://blog.youkuaiyun.com/column/details/mapdigityiiframework.html