Javascript 如何将可排序div拖到外部元素上
我想将可排序容器的div拖到一个可拖放的div（不可排序）上。我尝试过使用html5拖放事件，但没有一个被解雇。 最重要的是，不会触发可排序容器上的dragstart事件。 谁能给我一个解决办法吗。我只想启动dragstart事件。这是我的完整代码：Javascript 如何将可排序div拖到外部元素上,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我想将可排序容器的div拖到一个可拖放的div（不可排序）上。我尝试过使用html5拖放事件，但没有一个被解雇。 最重要的是，不会触发可排序容器上的dragstart事件。 谁能给我一个解决办法吗。我只想启动dragstart事件。这是我的完整代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Handle empty divsts</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
.draggableDivs{
background-color: orange;
border: solid black;
}
</style>
</head>
<body>
<div id="sortable" style="float: left;">
<div class="draggableDivs" draggable="true">Can be dropped !!..</div>
<div class="draggableDivs" draggable="true">..on an empty list</div>
<div class="draggableDivs" draggable="true">Item 3</div>
<div class="draggableDivs" draggable="true">Item 4</div>
<div class="draggableDivs" draggable="true">Item 5</div>
</div>
<div id="dropTarget" style="width: 500px; height: 500px; background-color: skyblue; float: left; text-align: center">
<h4>Drop Here</h4>
</div>
<script>
$("#sortable").sortable();
document.getElementById('sortable').addEventListener('dragstart', function(evt) {
console.log("The 'dragstart' event fired.");
evt.dataTransfer.setData('text', evt.target.textContent);
}, false);
</script>
</body>
</html>
jQuery UI可排序-处理空divst
.Dragabledivs{
背景颜色：橙色；
边框：纯黑；
}
可以放弃！！。。
…在一张空名单上
项目3
项目4
项目5
到这里来
$（“#可排序”）.sortable（）；
document.getElementById（'sortable'）.addEventListener（'dragstart'，函数（evt）{
log（“触发了“dragstart”事件”）；
setData（'text'，evt.target.textContent）；
}，假）；
$（“#可排序”）.sortable（）；
$（“#dropTarget”）。可拖放({
接受：“div”，
drop：函数（事件、用户界面）{
ui.draggable.clone（）.appendTo（this）；
ui.draggable.remove（）；
}
})#可排序{
浮动：左；
}
.Dragabledivs{
背景颜色：橙色；
边框：纯黑；
}
#投靶{
宽度：500px；
高度：500px；
浮动：左；
文本对齐：居中；
背景色：天蓝色；
}
可以放弃！！。。
…在一张空名单上
项目3
项目4
项目5
到这里来
draggable=“true”