如何在div內拖動div？

Question

我想使用拖放機制添加一些div 。 我在主div中添加了其他一些內容：當將div文本為“ HI”的div拖動到div下方時，我將另外兩個名為Drag和Drop的div附加到主div 。

現在，我想要的是能夠拖動div文本“ Drag”並將其拖放到div文本“ Drop”的功能。 我該如何實現？

這是我的代碼：

 $(function() { $(".draggable").draggable({ revert: true, helper: 'clone', start: function(event, ui) { $(this).fadeTo('fast', 0.5); }, stop: function(event, ui) { $(this).fadeTo(0, 1); } }); $("#div2").draggable({ start: function(event, ui) { alert('div2-drag'); $(this).fadeTo('fast', 0.5); }, stop: function(event, ui) { $(this).fadeTo(0, 1); } }); $("#div1").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('div1-drop'); //this.value = $(ui.draggable).text(); $("#mydiv").append('<div id="div1" ></div><div id="div2" ></div> '); } }); $("#mydiv").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('mydiv - drop'); //this.value = $(ui.draggable).text(); $("#mydiv").append('<div id="div1" > Drop</div><div id="div2" ondragstart="drag(event)" > Drag</div> '); } }); $("#mydiv_second").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('mydivsecond- drop'); //this.value = $(ui.draggable).text(); $("#mydiv_second").append('<div id="div1" > Drop</div><div id="div2" ondragstart="drag(event)" > Drag</div> '); } }); }); 

 body { font-family: sans-serif; font-size: 11pt; } .draggable { width: 250px; height: 20px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } .active { border: 2px solid #6699ff; } #mydiv { width: 350px; height: 300px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #mydiv_second { width: 350px; height: 300px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #div1 { width: 150px; height: 70px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #div2 { width: 30px; height: 30px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <div class="draggable">hi!</div> <div id="mydiv"></div> <div id="mydiv_second"></div> 

您也可以在此jsFiddle上看到它

Answer 1

為什么不能拖放.dropable()為“ Drag”的div的問題是在創建元素之前正在執行.draggable()和.dropable()方法（在頁面加載時執行）。

如果您移動以下代碼，則該問題已解決：

$("#div2").draggable({
    start: function(event, ui) {
        alert('div2-drag');
        $(this).fadeTo('fast', 0.5);
    },
    stop: function(event, ui) {
        $(this).fadeTo(0, 1);
    }
});
$("#div1").droppable({
    hoverClass: 'active',      
    drop: function(event, ui) {
        alert('div1-drop');
        //this.value = $(ui.draggable).text();
        $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' );
    }
});

將其放置在$("#mydiv").droppable部分中，就在創建#div1和#div2 （注意，您始終在創建具有相同ID的div ，並且在添加時可能會產生問題）超過一個）。

結果將是這樣的：

 $(function() { $(".draggable").draggable({ revert: true, helper: 'clone', start: function(event, ui) { $(this).fadeTo('fast', 0.5); }, stop: function(event, ui) { $(this).fadeTo(0, 1); } }); $("#mydiv").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('mydiv - drop'); //this.value = $(ui.draggable).text(); $( "#mydiv" ).append( '<div id="div1" > Drop</div><div id="div2" ondragstart="drag(event)" > Drag</div> ' ); $("#div2").draggable({ start: function(event, ui) { alert('div2-drag'); $(this).fadeTo('fast', 0.5); }, stop: function(event, ui) { $(this).fadeTo(0, 1); } }); $("#div1").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('div1-drop'); //this.value = $(ui.draggable).text(); $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' ); } }); } }); $("#mydiv_second").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('mydivsecond- drop'); //this.value = $(ui.draggable).text(); $( "#mydiv_second" ).append( '<div id="div1" > Drop</div><div id="div2" ondragstart="drag(event)" > Drag</div> ' ); $("#div2").draggable({ start: function(event, ui) { alert('div2-drag'); $(this).fadeTo('fast', 0.5); }, stop: function(event, ui) { $(this).fadeTo(0, 1); } }); $("#div1").droppable({ hoverClass: 'active', drop: function(event, ui) { alert('div1-drop'); //this.value = $(ui.draggable).text(); $( "#mydiv" ).append( '<div id="div1" ></div><div id="div2" ></div> ' ); } }); } }); }); function drag(e) {} 

 body { font-family: sans-serif; font-size: 11pt; } .draggable { width: 250px; height: 20px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } .active { border: 2px solid #6699ff; } #mydiv { width: 350px; height: 300px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #mydiv_second { width: 350px; height: 300px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #div1 { width: 150px; height: 70px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: default; } #div2 { width: 30px; height: 30px; background-color: #e6eaff; border: 2px solid #3399cc; margin-bottom: 1em; padding: 4px; cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <div class="draggable">hi!</div> <div id="mydiv"></div> <div id="mydiv_second"></div>