如何在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>