easyUI基础-droppable放置

最新推荐文章于 2020-04-09 18:05:33 发布

小太阳哇

最新推荐文章于 2020-04-09 18:05:33 发布

阅读量450

点赞数

分类专栏： easyUI学习

本文链接：https://blog.youkuaiyun.com/qq_39492374/article/details/86493730

版权

easyUI学习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了easyUI中的Droppable功能，重点在于如何创建和配置放置区域，以及与draggable的区别。Droppable允许指定元素接受其他可拖动元素，并详细列举了accept、disabled等关键属性，以及onDragEnter、onDrop等重要事件。此外，还提供了enable和disable方法来控制放置功能的启用和禁用。

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

droppable和draggable有类似的地方,不过区别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(虽然可能一些效果两者都可以实现)。而且通过查看easyloader源码可知道，droppable并不依赖于draggable。

Droppable（放置）

使用$.fn.droppable.defaults重写默认值对象。

使用案例

通过标签创建一个放置区。

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>

使用Javascript创建一个放置区。

<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({
accept:'#d1,#d3'
});

属性

属性名	属性值类型	描述	默认值
accept	selector	确定哪些可拖拽元素将被接受。	null
disabled	boolean	如果为true，则禁止放置。	false

事件

事件名	事件参数	描述
onDragEnter	e,source	在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
onDragOver	e,source	在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。
onDragLeave	e,source	在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
onDrop	e,source	在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素。

方法

方法名	方法参数	描述
options	none	返回属性对象。
enable	none	启用放置功能。
disable	none	禁用放置功能。

实例：

一.属性

1.accept：哪些元素可以被接收

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
    $(function() {
        $("#box1").draggable();
        $("#box2").draggable();
        $("#pox").droppable({
            accept: "#box1,#box2",//selector  选择器的名称，可以ID选择器，也可以是class选择器  默认为 null，确定哪些元素被接收
            onDragEnter: function(e, source) {
                //source分别放入的物体，即box1对象，box2对象
                alert($(source).html());
            },
        });
    });
</script>

2.disabled：如果为true，则禁止放置，即放置没有效果

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div>
<div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div>
<script>
    $(function () {
        $("#box1").draggable();
        $("#box2").draggable();
        $("#pox").droppable({
            accept: "#box1,#box2",
            disabled: true,//boolean  布尔值  默认为 false，如果为 true，则禁止放置
            onDragEnter: function (e, source) {
                //不会弹出任何东西
                alert($(source).html());
            },
        });
    });
</script>

二、事件

1.onDragEnter：在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {
                $(this).css("background", "red");;
            },
        });
    });
</script>

2.onDragLeave：在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {
                $(this).css("background", "red");;
            },
            onDragLeave: function (e, source) {
                $(this).css("background", "yellow");
            }
        });
    });
</script>

3.onDrop：在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {
                $(this).css("background", "red");;
            },
            onDragLeave: function (e, source) {
                $(this).css("background", "yellow");
            },
            onDrop: function (e, source) {
                $(this).css("background", "green");
            }
        });
    });
</script>

4.onDragOver：在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {//参数是e,source 在被拖拽元素到放置区内的时候触发
                $(this).css("background", "red");;
            },
            onDragLeave: function (e, source) {//参数是e,source 在被拖拽元素离开放置区的时候触发
                $(this).css("background", "yellow");
            },
            onDrop: function (e, source) {//参数是e,source 在被拖拽元素放入到放置区的时候触发
                $(this).css("background", "green");
            },
            onDragOver: function (e, source) {//参数是e,source 在被拖拽元素经过放置区的时候触发
                $(this).css("background", "orange");
            }
        });
    });
</script>

三、方法

1.options：返回属性对象

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#pox").droppable({
            accept: "#box"
        });
        console.log($("#pox").droppable("options"));//options方法，值是none；说明 返回属性对象
    });
</script>

2.disable：禁用放置功能

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {
                $(this).css("background", "red");;
            },
        });
        //放置物品不会变色
        $("#pox").droppable("disable");//disable 方法，值是none；说明 禁用放置功能
    });
</script>

3.enable：启用放置功能

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div>
<div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div>
<script>
    $(function () {
        $("#box").draggable();
        $("#pox").droppable({
            accept: "#box",
            onDragEnter: function (e, source) {
                $(this).css("background", "red");;
            },
        });
        $("#pox").droppable("disable");
        //放置区会变色
        $("#pox").droppable("enable");//disable 方法，值是none；说明 启用放置功能
    });
</script>