可拖放的 Jquery UI 切换位置

Question

我现在正在学习 Jquery Draggable 和 Droppable。我想创建可切换的内容。我有这个方案：

<div class="droppableContainer">
  
  <div class="draggableContent" id="Content1">
    Hi I am Content 1.
  </div>
  
</div>


<div class="droppableContainer">
  
  <div class="draggableContent" id="Content2">
    Hi I am Content 2.
  </div>
  
</div>

如果我将我的 Content1 拖放到另一个 droppableContainer 中，我想用 Content2 切换它。所以在我删除 Content1 后，Content2 移动到 Content1 droppableContainer，如下所示。

<div class="droppableContainer">
  
  <div class="draggableContent" id="Content2">
    Hi I am Content 2.
  </div>
  
</div>


<div class="droppableContainer">
  
  <div class="draggableContent" id="Content1">
    Hi I am Content 1.
  </div>
  
</div>

有什么建议吗？谢谢

Answer 1

我使用sortable() 解决了这个问题。

首先，您需要将可拖动项目包装在单个容器中，如下所示：

<div class="droppableContainer">
  <div class="draggableContent" id="Content2">
    Hi I am Content 2.
  </div>
  <div class="draggableContent" id="Content1">
    Hi I am Content 1.
  </div>
</div>

并添加这个js：

$(".droppableContainer").sortable({
    distance: 20, //distance is optional. This indicates the number of pixels that the mouse must be moved before the sorting starts.
    placeholder: "highlight"
}); 
$( ".droppableContainer" ).disableSelection(); 

然后，如果您想让this example 看起来像this example，您可以选择使用一些CSS 为您的highlight 类设置样式。

你可以查看我在Codepen制作的这个demo