[英]How can i get id from each draggable div when i drop into the droppable div
我正在尝试创建一个执行 function 的系统，当我根据“draggables”div 中的每个 id 将“draggable”div 拖到“droppable”区域时。 为此，我将 jquery 与 jqueryUI 一起使用，但我无法找到从每个“可拖动”div 获取 id 的方法。
$('#draggables').children().draggable({ revert: "invalid" }) $('#droppable').droppable({ accept: $('#draggables').children(), drop: function(){ var a = $('#draggables').children().attr('id') alert(a) } })
body{ background-color: #111; color: #555; } main{ display: flex; gap: 40px; } #draggables{ display: flex; flex-direction: column; gap: 20px; }.draggable{ display: flex; align-items: center; justify-content: center; background: #151515; border: 1px solid #222; width: 100px; height: 100px; cursor: move; } #droppable{ display: flex; align-items: center; justify-content: center; background: #090909; border: 1px solid #222; width: 200px; height: 200px; }
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <main> <section id="draggables"> <div id="1" class="draggable">1</div> <div id="2" class="draggable">2</div> <div id="3" class="draggable">3</div> <div id="4" class="draggable">4</div> </section> <div id="droppable"> <p>Drop Something Here</p> </div> </main> </body> </html>
您可以尝试使用以下代码：
drop: function(event,ui){
//var a = $('#draggables').children().attr('id')
alert($(event.toElement).attr("id"));
}
工作代码
$('#draggables').children().draggable({ revert: "invalid" }) $('#droppable').droppable({ accept: $('#draggables').children(), drop: function(event,ui){ //var a = $('#draggables').children().attr('id') alert($(event.toElement).attr("id")); } })
body{ background-color: #111; color: #555; } main{ display: flex; gap: 40px; } #draggables{ display: flex; flex-direction: column; gap: 20px; }.draggable{ display: flex; align-items: center; justify-content: center; background: #151515; border: 1px solid #222; width: 100px; height: 100px; cursor: move; } #droppable{ display: flex; align-items: center; justify-content: center; background: #090909; border: 1px solid #222; width: 200px; height: 200px; }
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <main> <section id="draggables"> <div id="1" class="draggable">1</div> <div id="2" class="draggable">2</div> <div id="3" class="draggable">3</div> <div id="4" class="draggable">4</div> </section> <div id="droppable"> <p>Drop Something Here</p> </div> </main> </body> </html>
实现 Angular 可拖放，如何将 DIV 放置在某个位置并保持在该位置
[英]Implementing Angular draggable droppable, how can I drop a DIV at a place and it stays there
当我将div放在可放置区域时，如何获取输入文本值（从数据库）？
[英]How to get the input text value (from database) when I drop the div on droppable area?
当我单击可放置项目时，如何获取可拖动项目的ID
[英]jquery ui How to get a id of a draggable item when i click on the droppable item
我怎样才能获得一个div的ID，这个div只是放在这个USED上的一个可拖动的对象被放入？
[英]How can I get the ID of the div that a draggable object which was just dropped on this USED to be dropped into?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.