无法使用 jquery UI 拖放可拖动对象答案

【问题标题】：Unable to Drop draggable using jquery UI无法使用 jquery UI 拖放可拖动对象
【发布时间】：2014-11-27 05:52:26
【问题描述】：

当我将 LI 元素鼠标拖到“Drop Header”上时内部 div 应该出现并且我可以将我的 LI 元素放在哪里，但是一旦我到达那个内部放置区域它就会消失。

jQuery(function ($) {
    $("#dragLi > li").draggable({helper: "clone"});
            $( ".reviewersListDv > div#droppable" ).droppable({
            over: function( event, ui ) {
            $(this).find('.parallelSectContent').show();
            },
                    out: function( event, ui ) {    
                    $(this).find('.parallelSectContent').hide();
                    },
            drop: function( event, ui ) {
                    (ui.helper).remove(); //destroy clone
                    $(ui.draggable).remove(); //remove from list   
            $(this).find('.parallelSectContent').show();
            $( this ).find('.dropZone').empty().append( 'Droped');      
            }
                });
});

【问题讨论】：

在我看来，这是显而易见的。看，当您将鼠标悬停在可放置元素上时，您会显示一个不在可放置元素内的新元素。因此，当您移动到新元素（即parallelSectContent）时，您实际上是从可放置部分移出，因此会调用隐藏“parallelSectContent”的“out”方法。可能的解决方案是将此元素放在 droppable 内或使用默认占位符功能。
parallelSectContent 已经在 droppable 中，默认占位符功能是什么？
不，如果您看到 html parallelSectContent 在#droppable 内但不在parallelSectHeadr 内。其次，您的 html 无效。您在多个元素上使用相同的 ID。
我删除了重复的 id
@Jitu 你从哪里删除的..？本地..？我仍然可以在共享小提琴中看到重复的 id。

标签： jquery html jquery-ui drag-and-drop

【解决方案1】：

演示：http://jsfiddle.net/lotusgodkk/6jjR2/50/

这就是我所指的。

CSS：

.displayNone {
    display:none;
}
.parallelSectHeadr {
    background: powderblue;
    height: auto;
}
#droppable {
    margin-bottom:10px;
}
.parallelSectContent {
    border: 1px solid black;
    background: gray;
    padding: 10px;
}
#dragLi li {
    background: pink;
    margin-bottom: 5px;
    width: 60px;
}

HTML：

<table width="100%">
    <tbody>
        <tr>
            <td width="20%">
                <ul id="dragLi">
                    <li>part 1</li>
                    <li>part 2</li>
                    <li>part 3</li>
                    <li>part 4</li>
                </ul>
            </td>
            <td width="80%">
                <div class="reviewersListDv">
                    <div id="droppable">
                        <div class="parallelSectHeadr"> <span class="floatRight reviewStatusBx pending">Drop Header</span>

                            <div class="parallelSectContent clearfix displayNone">  <span class="dropZone">Drop  over here</span>

                            </div>
                        </div>
                    </div>
                    <div id="droppable">
                        <div class="parallelSectHeadr"> <span class="floatRight reviewStatusBx pending">Drop Header</span>

                            <div class="parallelSectContent clearfix displayNone">  <span class="dropZone">Drop  over here</span>

                            </div>
                        </div>
                    </div>
                    <div id="droppable">
                        <div class="parallelSectHeadr"> <span class="floatRight reviewStatusBx pending">Drop Header</span>

                            <div class="parallelSectContent clearfix displayNone">  <span class="dropZone">Drop  over here</span>

                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我将“parallelSectContent”移动到“parallelSectHeadr”中。从 CSS 中删除了 height 和 line-height。这现在应该对你有用。您可以添加新的 CSS 来设置样式

【讨论】：

这几乎是我想要的，但是当我向下移动一点时，parallelSectContent 就会消失
@Jitu 可以增加可拖动元素的间距，也可以增加高度。这将解决它。演示：jsfiddle.net/lotusgodkk/6jjR2/53
是的，我认为间距是问题。