将项目拖到父项外部并进入UI对话框 [英] Drag item outside parent and into UI dialog

问题描述

我有一个li class ='draggable'和一个div class ='dropable'，它位于一个ui对话框div

I have an "li class='draggable' " and a "div class='dropable' " that is inside a ui dialog div

当我尝试拖动'li'我不能将它拖到它的父元素之外所以我这样做：

when i try to drag the 'li' i can't drag it outside it's parent element so i did this :

$(".draggable").draggable({
                containment: $('document'),
                helper: 'clone'
            });

我设法将其拖到父元素之外但是在这里ui对话框打开时问题开始了当我试图拖动它时，li总是在ui对话框后面，我不能将它放入droppable div中

i managed to dragged outside it parent element but here where the problem start when the ui dialog is opened and when i try to drag it the li is always behind the ui dialog and i can't drop it into the droppable div

推荐答案

尝试直接将帮助器附加到正文，并可能设置zIndex，如下所示：

Try appending the helper directly to the body, and possbly setting a zIndex, like so:

$(".draggable").draggable({
    appendTo: 'body', // Append to the body.
    zIndex: <someNumberYouThinkIsAppropriateHere>,
    containment: $('document'),
    helper: 'clone'
});

http://api.jqueryui.com/draggable/#option-appendTo

http://api.jqueryui.com/draggable/#option-zIndex

这篇关于将项目拖到父项外部并进入UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！