从可滚动的div拖动到droppable然后再拖的实现,可以通过以下几个步骤来完成:
- 使用jQuery UI的draggable和droppable插件,可以方便地实现拖拽功能。
- 在可滚动的div上添加draggable属性,并设置相应的参数,例如:$("#draggable").draggable({
scroll: true,
scrollSensitivity: 100,
scrollSpeed: 50,
containment: "parent",
helper: "clone"
});其中,scroll参数设置为true表示可以在拖动时自动滚动,scrollSensitivity和scrollSpeed分别表示滚动敏感度和滚动速度,containment参数设置为"parent"表示拖动范围限制在父元素内,helper参数设置为"clone"表示拖动时创建一个克隆元素。
- 在droppable区域添加droppable属性,并设置相应的参数,例如:$("#droppable").droppable({
accept: "#draggable",
drop: function(event, ui) {
// 处理拖放后的逻辑
}
});其中,accept参数设置为需要拖动元素的选择器,drop参数是一个回调函数,当元素被成功拖放时会被触发,可以在这里处理拖放后的逻辑。
- 在drop回调函数中,可以获取拖动元素的信息,例如:drop: function(event, ui) {
var draggable = ui.draggable;
var id = draggable.attr("id");
var text = draggable.text();
// 处理拖放后的逻辑
}这里可以获取拖动元素的id和文本内容,也可以根据需要获取其他属性。
- 在drop回调函数中,可以将拖动元素添加到droppable区域,例如:drop: function(event, ui) {
var draggable = ui.draggable;
var clone = draggable.clone();
$(this).append(clone);
// 处理拖放后的逻辑
}这里可以使用clone方法创建一个新的元素,然后将其添加到droppable区域中,也可以根据需要进行其他操作。
通过以上步骤,就可以实现从可滚动的div拖动到droppable区域,并在droppable区域中进行拖拽的功能。