Jquery 带限制拖放区的拖放

这是我第一次尝试使用拖放控件，但我很难弄清楚它是如何工作的。目前我有两个div，我想将元素从一个div移动到另一个div。使用draggable允许我将div放置在任何我不想要的地方，我想限制元素可拖动的区域

另一方面，我看到了jqueryui示例，它们都与droppable元素交互，但我需要从draggable元素获取id属性。这就是我到目前为止所做的，现在我不仅无法使div保持在它们应该保持的有限区域内，而且还无法获得draggable元素Id属性

任何帮助都将不胜感激。谢谢

这里有一个更新的提琴，它显示了我现在所遇到的具有可拖动效果的bug。

HTML:

   <div name="list-a" class="droppable">
  <h3>List A</h3>
  <div class="task-wrapper">
      <div class="draggable" id="1" name="1">
          <a href="#">Element 1</a>
      </div>
      <div class="draggable" id="2" name="3">
          <a href="#">Element 2</a>
      </div>
      <div class="draggable" id="3" name="3">
          <a href="#">Element 3</a>
      </div>
  </div>
</div>
<div name="list-b" class="droppable">
  <h3>List B</h3>
  <div class="task-wrapper">
      <div class="draggable" id="5" name="5">
          <a href="#">Element 5</a>
      </div>
      <div class="draggable" id="6" name="6">
          <a href="#">Element 6</a>
      </div>
  </div>
</div>

$(document).ready(function(){
    $( ".draggable" ).draggable({
    start: function( event, ui ) {
        var id = $(this).closest(".draggable").attr('id');
    }
});

$( ".droppable" ).droppable({
    accept: '.draggable',
    drop: function(event, ui){
        var id = ui.draggable.attr("id");
        alert(id);  
    }
    });
});

HTML:

   <div name="list-a" class="droppable">
  <h3>List A</h3>
  <div class="task-wrapper">
      <div class="draggable" id="1" name="1">
          <a href="#">Element 1</a>
      </div>
      <div class="draggable" id="2" name="3">
          <a href="#">Element 2</a>
      </div>
      <div class="draggable" id="3" name="3">
          <a href="#">Element 3</a>
      </div>
  </div>
</div>
<div name="list-b" class="droppable">
  <h3>List B</h3>
  <div class="task-wrapper">
      <div class="draggable" id="5" name="5">
          <a href="#">Element 5</a>
      </div>
      <div class="draggable" id="6" name="6">
          <a href="#">Element 6</a>
      </div>
  </div>
</div>

$(document).ready(function(){
    $( ".draggable" ).draggable({
    start: function( event, ui ) {
        var id = $(this).closest(".draggable").attr('id');
    }
});

$( ".droppable" ).droppable({
    accept: '.draggable',
    drop: function(event, ui){
        var id = ui.draggable.attr("id");
        alert(id);  
    }
    });
});

---

这是一个很好的开始，但是，在您的案例中，我正在两个下拉框之间移动“可拖动”元素。。。当我使用你的代码时，它移动得很好，但是原始元素会保留下来。这是因为我正在克隆它。如果你不想复制它，我可以添加到我的答案中，给我一分钟。如果你想获得元素id，你可以使用

var id=$（“.item”）.attr（“id”）并将其存储在变量
id
中，我尝试了这个新示例。。。如果在div中移动元素，它可以正常工作，但是如果在div之间移动元素，我注意到它不起作用，因为您以前使用的“$（“.item”）.removeAttr（“style”）；”行丢失了。奇怪的是，在移动第一个元素后，拖放感觉就消失了。请检查这里你的例子：给我几分钟，我会玩它，你想要它，这样你就可以来回拖动它们，它会在拖放时到达那里，对吗？这是一个很好的开始，但是，在你的情况下，我正在两个拖放框之间移动“可拖动”元素。。。当我使用你的代码时，它移动得很好，但是原始元素会保留下来。这是因为我正在克隆它。如果你不想复制它，我可以添加到我的答案中，给我一分钟。如果你想获得元素id，你可以使用
var id=$（“.item”）.attr（“id”）并将其存储在变量
id
中，我尝试了这个新示例。。。如果在div中移动元素，它可以正常工作，但是如果在div之间移动元素，我注意到它不起作用，因为您以前使用的“$（“.item”）.removeAttr（“style”）；”行丢失了。奇怪的是，在移动第一个元素后，拖放感觉就消失了。请在这里查看您的示例：给我几分钟时间，我会玩它，您需要它，这样您就可以来回拖动它们，并在右下角找到它们的id？元素id可以在ui中找到。可拖动[0]。我工作得很好。谢谢@Rohan210Element id可以在ui中找到。可拖动[0]。idIt运行良好。谢谢@Rohan210