easyui-droppable放置

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

原创最新推荐文章于 2020-04-09 18:05:33 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyui 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的拖放功能示例，包括拖动元素（#box）和放置区域（#dd）。通过定义droppable和draggable方法，设置不同阶段的事件回调函数如onDragEnter、onDragOver等，实现了元素的拖拽反馈效果。

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

$('#dd').droppable({
accept : '#box',
disabled : false,
onDragEnter : function (e, source) {
//console.log(source);
$(this).css('background', 'blue');
//alert('enter');
},
onDragOver : function (e, source) {
//console.log(source);
$(this).css('background', 'orange');
//alert('over');
},
onDragLeave : function (e, source) {
//console.log(source);
$(this).css('background', 'green');
//alert('over');
},
onDrop : function (e, source) {
//console.log(source);
$(this).css('background', 'maroon');
//alert('over');
},
//onDragEnter只触发一次，而Over会在不停的拖动中不停触发
//onDrop是放入到放置区，松开鼠标左键，丢下的操作
});

//console.log($('#dd').droppable('options'));

//$('#dd').droppable('disable');
//$('#dd').droppable('enable');

$('#box').draggable({

});