可拖放的Jquery UI开关位置

Draggable and Droppable Jquery UI Switch Position

本文关键字：开关 位置 UI Jquery 拖放      更新时间：2023-09-26

我现在正在学习Jquery可拖放。我想创建可切换的内容。我有这样的方案:

<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并把它放到另一个可掉落容器，我想把它与Content2切换。因此，在我放置Content1之后，Content2移动到Content1的droppableconcontainer中，如下所示。

<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>

有什么建议吗?由于

我使用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();

然后，如果你想让它看起来像这个例子，你可以选择用一些CSS样式你的highlight类。

你可以查看我在Codepen

中做的演示
相关文章：