拖放区域受限

Posted 2023-05-08

【中文标题】拖放区域受限

【英文标题】：Drag and Drop with restricted drop zones

【发布时间】：2013-03-19 12:43:04

【问题描述】：

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

另一方面，我看过 jquery UI 示例，它们都与 droppable 元素交互，但我需要从 draggable 元素中获取 id 属性。这是我到目前为止所做的，现在我不仅无法让 div 保持在他们应该在的有限区域内，而且我也无法获得可拖动元素的 Id 属性。

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

http://jsfiddle.net/LPWhc/1/

$(function() 
  $(".draggable").draggable();
  $(".droppable").droppable(
    drop: function(event, ui) 
      var id, state;
      state = $(this).attr("name");
      id = $(this).closest(".droppable").attr("id");
      alert("Element Id: " + id);
      alert("Element New State: " + state);
    
  );
);

这是一个更新的小提琴，它显示了我现在遇到的可拖动效果的错误。 http://jsfiddle.net/LPWhc/3/

$(function() 
    $(".draggable").draggable( revert: 'invalid');

    $(".droppable").droppable(
        accept: '.draggable',
        drop: function(event, ui) 
            $(this).append($(ui.helper));
            $(".draggable").addClass("item"); 
            $(".item").removeAttr("style");
            $(".item").draggable(
                revert: 'invalid'
            );
        
    );
);

【问题讨论】：

元素id可以通过ui.draggable[0].id找到

效果很好。谢谢@Rohan210

【参考方案1】：

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>

jQuery：

$(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");"你以前用过的那个不见了。奇怪的是，移动第一个元素后，拖放的感觉就消失了。请在此处查看您的示例：jsfiddle.net/Pck8G

给我几分钟，我会玩它，你想要它，这样你就可以来回拖动它们，它会在放下时到达那里，对吗？