Item (li) 拖出 List (ul) 区域时消失

Question

我有一个列表，我正在尝试创建一个系统，在该系统中，人们可以将项目从该列表拖动到 div（不是其他列表），反之亦然。下面是我的代码：

$(function() {
$( "ul, li" ).disableSelection();
$( "li" ).draggable({
revert:"invalid"});
$( "#droppable" ).droppable({
 drop: function( event, ui ) {ui.draggable.remove()}
});
});

#droppable
{
 height:150px;
 width:750px;
 background:rgba(0,200,0,0.3);
 display:inline-block;
}
ul
{
    border: 1px solid #eee;
 width: 142px;
 min-height:20px;
 height:142px;
 list-style-type: none;
 margin: 0;
 overflow:hidden;
 overflow-y:scroll;
 padding: 5px 0 0 0;
 float: right;
 margin-right: 10px;
}
ul li
{
 color:red;
 border : 1px solid #eee;
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 120px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="droppable"></div>
<br>
<ul>
  <li id="drag">Item1</li>
  <li id="drag">Item2</li>
  <li id="drag">Item3</li>
  <li id="drag">Item4</li>
  <li id="drag">Item5</li>
</ul>

尝试运行代码和拖放列表项，既有现成的也有现成的。你会明白我的意思的。

问题是，当我将项目拖出列表 (ul) 区域时，它不会出现，如果我将它放到不可放置的区域，它会恢复到应有的列表。如果我将它放在 #droppable dic 中，它就会从列表中删除但仍然不可见。

我尝试将 ul 和 li 的 z-index 设置为 2 并将 #droppable 设置为 1 但那没有也无济于事。

PS。如果该项目处于拖动状态并被拖出 ul 区域，那么它也会消失。它仅在 ul 区域可见。任何帮助将不胜感激。

Answer 1

这段代码有几个问题-

您的意图是将 li 列表项从有效的父容器（ul 无序列表元素）移动到无效的父容器（一个 div 元素）。

Permitted parent elements An <ul>, <ol> or <menu> element. Though not a non-conforming usage, the obsolete <dir> may also be a parent.

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

除非有充分的理由不让它成为另一个列表，否则我建议使用列表元素并简单地对其进行样式设置以删除项目符号以进行您需要的任何其他 visual/design 更改。

HTML 的无效使用会导致浏览器之间的渲染不同，应该避免。

如果您必须将其移动到 div 元素，那么我建议从列表元素复制内部文本或 HTML 并附加它到 div - 可能在合适的块容器中，例如段落 (p).

您的列表溢出导致列表项在超出列表块范围时被隐藏。 jQuery UI 可拖动方法与大多数库可拖动方法一样，使用 CSS 定位（在本例中为相对位置）在用户拖动时移动列表项。一旦列表项位于包含列表块之外，它就会根据您的 CSS 规则隐藏。一些库，例如 Kendo UI, create a copy of the item - leaving the original in place - until it is dropped and the item is detached and moved to the new location. The same effect can be achieved in jQuery UI by setting the helper option 到 "clone".

此方法可以解决您的溢出问题，否则您将需要从父列表中删除溢出：隐藏样式。

在拖放事件中，您明确地 删除了拖动的项目。这就是为什么它没有像您期望的那样出现在新的地方。您正在将其从 DOM（文档）中完全删除。

为了保持原始代码的精神，我在下面的代码片段中解决了这些问题 -

$(function() {
   $( "ul, li" ).disableSelection();
   $( "li" ).draggable({
      helper: "clone",
      revert:"invalid"
   });
   $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        var dragText = ui.draggable.text();
        
        $(event.target).append($('<p>').text(dragText));
        
        ui.draggable.remove();
        
        event.preventDefault();
      }     
   });
});

#droppable
{
 height:150px;
 width:750px;
 background:rgba(0,200,0,0.3);
 display:inline-block;
}
ul
{
    border: 1px solid #eee;
 width: 142px;
 min-height:20px;
 height:142px;
 list-style-type: none;
 margin: 0;
 overflow:hidden;
 overflow-y:scroll;
 padding: 5px 0 0 0;
 float: right;
 margin-right: 10px;
}
ul li
{
 color:red;
 border : 1px solid #eee;
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 120px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="droppable"></div>
<br>
<ul>
  <li id="drag">Item1</li>
  <li id="drag">Item2</li>
  <li id="drag">Item3</li>
  <li id="drag">Item4</li>
  <li id="drag">Item5</li>
</ul>

Answer 2

由于现有答案已被接受，我将原封不动地保留它 - 但我已修改此副本以解决 OP 评论中的问题，要求该项目保留其在 中的下降位置div 容器。

$(function() {
   $( "ul, li" ).disableSelection();
   $( "li" ).draggable({
      helper: "clone",
      revert:"invalid"
   });
   $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        var dragText = ui.draggable.text();
        
        var $dropTarget = $(event.target);

        var targetPosition = $dropTarget.offset();

        var dropPosition = ui.offset;

        var relativePosition = {
            left: (dropPosition.left - targetPosition.left),
            top: (dropPosition.top - targetPosition.top)
        };

        $dropTarget.append($('<p>').css({ left: relativePosition.left + 'px', position: 'absolute', top: relativePosition.top + 'px' }).text(dragText));
      
        ui.draggable.remove();
        
        event.preventDefault();
      }     
   });
});

#droppable {
 height:150px;
 width:750px;
 background:rgba(0,200,0,0.3);
 display:inline-block;
    position: relative; /* Added position relative to act as positioning container */
}

ul {
    border: 1px solid #eee;
 width: 142px;
 min-height:20px;
 height:142px;
 list-style-type: none;
 margin: 0;
 overflow:hidden;
 overflow-y:scroll;
 padding: 5px 0 0 0;
 float: right;
 margin-right: 10px;
}

ul li{
 color:red;
 border : 1px solid #eee;
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 120px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="droppable"></div>
<br>
<ul>
  <li id="drag">Item1</li>
  <li id="drag">Item2</li>
  <li id="drag">Item3</li>
  <li id="drag">Item4</li>
  <li id="drag">Item5</li>
</ul>

Item (li) 拖出 List (ul) 区域时消失

Item (li) disappears when dragged out of List (ul) region

css

jquery

html-lists