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

尝试运行代码并拖放列表项，无论是开箱即用还是开箱即用。你会明白我的意思。

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

我尝试将 ul 和 li 的 z-index 设置为 2 和 #droppable 到 1 但这也没有帮助。

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

Answer 1

这段代码有几个问题-

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

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

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

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

1. 您的列表溢出导致列表项在超出列表 block 范围时被隐藏。 jQuery UI 可拖动方法与大多数库可拖动方法一样，使用 CSS 定位(在本例中为相对位置)在用户拖动列表项时移动它。一旦列表项位于包含列表 block 之外，它就会根据您的 CSS 规则隐藏。一些图书馆，例如Kendo UI , 创建元素的副本 - 将原始元素留在原处 - 直到它被放下并且元素被分离并移动到新位置。通过设置 helper option 可以在 jQuery UI 中实现相同的效果。 “克隆”。

这种方法可以解决您的溢出问题，否则您将需要从父列表中删除 overflow: hidden 样式。

1. 在拖放事件中，您显式删除了被拖动的元素。这就是为什么它没有像您期望的那样出现在新的地方。您正在将其从 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>