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中，那么它就会从列表中删除但仍然不可见。

我尝试将z-index的{{1}}和ul设置为li，将2设置为#droppable，但这没有帮助任

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

Answer 1

此代码存在一些问题 -

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

允许的父元素＆lt; ul＆gt;，＆lt; ol＆gt;或者＆lt; menu＆gt;元件。虽然没有不合格的用法，过时的＆lt; dir＆gt;也可能是父母。

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

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

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

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

列表中的溢出导致列表项在列表块的范围之外移动时被隐藏。与大多数库可拖动方法一样，jQuery UI可拖动方法使用CSS定位（在这种情况下相对位置）来移动列表项，因为它被用户拖动。一旦列表项位于包含列表块之外，它就会根据您的CSS规则隐藏。某些库（例如Kendo UI）会创建项目的副本 - 将原始文档留在原位 - 直到它被删除并且项目被分离并移动到新位置。通过将helper option设置为“clone”，可以在jQuery UI中实现相同的效果。

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

在放置事件中，您显式删除拖动的项目。这就是为什么它没有像你期望的那样出现在新的地方。您将完全从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在评论中的问题，要求该项目保留其“＆＃39;在 div 容器中删除位置。

＆＃13;

$(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();
      }     
   });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

拖出List（ul）区域时，项目（li）消失

2 个答案: