jQuery EasyUI 拖放 - 创建拖放的购物车
jQuery EasyUI 拖放 - 创建拖放的购物车
1. 简介
jQuery EasyUI 是一个基于 jQuery 的UI插件集合，其中包含了拖放组件。通过使用jQuery EasyUI，我们可以轻松地实现拖放的功能，创建一个购物车。
2. 实现步骤
2.1 引入EasyUI库
在
标签内引入EasyUI库： <link href="//cdn.bootcss.com/easyui/1.5.1/themes/default/easyui.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.5.1/jquery.easyui.min.js"></script>
2.2 创建目标容器和拖动项
<div class="buy-container">
<ul class="item-container">
<li class="item" itemname="item1">Item 1</li>
<li class="item" itemname="item2">Item 2</li>
<li class="item" itemname="item3">Item 3</li>
<li class="item" itemname="item4">Item 4</li>
</ul>
<ul class="cart-container">
</ul>
</div>
在这个例子中，我们创建了一个包含“item-container”和“cart-container”的“buy-container”目标容器。在“item-container”内创建了四个“item”拖动项，每个项有一个“itemname”属性来标识它。
2.3 实现拖放功能
$(function(){
$('.item').draggable({
revert:true,
proxy:'clone'
});
$('.cart-container').droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor = 'auto';
},
onDragLeave:function(e,source){
$(source).draggable('options').cursor='not-allowed';
},
onDrop:function(e,source){
var itemName = $(source).attr('itemname');
$(this).append('<li>'+itemName+'</li>');
}
});
});
在这个例子中，我们使用了“draggable()”方法和“droppable()”方法来使所有的“item”都支持拖放，并定义了“onDragEnter()”、“onDragLeave()”和“onDrop()”事件处理程序。
-
当鼠标光标进入“cart-container”时，将“item”光标设置为自动。
-
当鼠标光标离开“cart-container”时，将“item”光标设置为不允许。
-
当把“item”拖动到“cart-container”中时，将其添加到购物车中。
完成后，运行该代码，即可看到我们创建的拖动购物车，可以将“item”拖到购物车中。
3. 总结
使用jQuery EasyUI，我们可以轻松地实现拖放的功能。在上面的代码中，我们使用了“draggable()”和“droppable()”方法来使所有的“item”都支持拖放，并定义了“onDragEnter()”、“onDragLeave()”和“onDrop()”事件来处理拖拽过程中的光标和添加到购物车中的操作。