拖放问题jquery

我有下面的代码使用脚本我正在制作可拖动的东西和droppable。 目前我有两个可拖动内容，两个地方可以删除，如果正确，那么系统将改变并说出正确，我想知道是否有，我将能够只创建HTML div和代码运行通过并将draggable与dropable相匹配。 我的人有非技术性的bac​​kdround，有基本的HTML知识所以你现在如何添加div并删除它们但是他们能够处理脚本，我想知道，如果我的ID为1-10可拖动的内容和相同的可丢弃的1-10所以id 1 draggable只能添加到id一个droppable。

      #droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }   $(function() { $( "#draggable, #draggable2" ).draggable(); $( "#droppable" ).droppable({ accept: "#draggable", drop: function( event, ui ) { $( this ) .removeClass("ui-widget-header") .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); }, out: function( event, ui ) { $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" ) .find( "p" ) .html( "accept" ); } }); $( "#droppable2" ).droppable({ accept: "#draggable2", drop: function( event, ui ) { $( this ) .removeClass("ui-widget-header") .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); }, out: function( event, ui ) { $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" ) .find( "p" ) .html( "accept" ); } }); });  
 
I'm draggable but can't be dropped
 
 
 
Drag me to my target
 
 
 
accept: '#draggable'
 
 
 
accept: '#draggable2'
  

Answer 1

您需要避免为此使用HTML id并开始使用类。 以下是一个工作示例 ，如何做到这一点：

你的HTML：

 
 
draggable_2
 
 
 
draggable
 
 
 
 
 
 
 
 
 
  

你的javascript：

 $(function () { $(".draggable-item").draggable(); $('.droppable-item').each(function (i, ele) { // Gets the accepted from the HTML property "data-accept" var accept = $(this).data('accept'); // This is just to show what the item accepts. you can remove it. $(this).find('p').text('accepts: ' + accept); // Init the jQuery UI droppable() $(this).droppable({ accept: accept, drop: function (event, ui) { $(this) .removeClass("ui-widget-header") .addClass("ui-state-highlight") .find("p") .html("Dropped!"); }, out: function (event, ui) { $(this).removeClass("ui-state-highlight").addClass("ui-widget-header") .find("p") .html("accept: " + accept); } }); }); }); 

Answer 2

如果我正确地理解了你的问题，你希望每个draggable只能放置它的droppable而没有其他可放置的div。

您已经通过在代码中为每个droppable添加了accept: "#draggable"来实现这一目标。

您可以添加这个额外的代码行，这样如果您的draggable被丢弃到droppable以外的任何地方，它将返回到它的droppable。 $( "#draggable, #draggable2" ).draggable({ revert: "invalid" });

如果你添加了相同的类（如class=draggables到每个可拖动的html元素，然后你可以使用$( ".draggables" ).draggable({ revert: "invalid" }); draggables $( ".draggables" ).draggable({ revert: "invalid" }); draggable $( ".draggables" ).draggable({ revert: "invalid" });可以缩短这段代码。

这是一个显示示例的jsfiddle 。