Javascript jQuery draggable在特定div中不起作用_Javascript_Jquery_Css_Twitter Bootstrap_Jquery Ui

Javascript jQuery draggable在特定div中不起作用

javascript jquery css twitter-bootstrap jquery-ui

Javascript jQuery draggable在特定div中不起作用,javascript,jquery,css,twitter-bootstrap,jquery-ui,Javascript,Jquery,Css,Twitter Bootstrap,Jquery Ui,我正试图用jQueryUI和Bootstrap创建一个可拖动的div。我已经创建了draggable div，但是如果将draggable div放到另一个div中，它将不再是可移动的。（第二个div不是可拖放的div。）填满填满把我放在这里 $（文件）。准备好了吗( 函数（）{ $（'.elem'）.draggable( {appendTo:'body'} ); } ); 有人能帮我吗？drop的z-index比elem高。你不会把你的拖拽物品放在div上，而是放在下面。这样你就不能

我正试图用jQueryUI和Bootstrap创建一个可拖动的div。我已经创建了draggable div，但是如果将draggable div放到另一个div中，它将不再是可移动的。（第二个div不是可拖放的div。）


填满
填满
把我放在这里
$（文件）。准备好了吗(
函数（）{
$（'.elem'）.draggable(
{appendTo:'body'}
);
}
);

有人能帮我吗？

drop

的

z-index

比

elem

高。你不会把你的拖拽物品放在div上，而是放在下面。这样你就不能再拖了

您可以为可拖动项设置一个高

z-index

值，以确保它们高于任何其他项，或者设置

指针事件：无用于放置的元素
这应该解释代码中发生了什么（要查看差异，请取消对其中一种样式的注释）：

$（'.elem'）。可拖动(
{appendTo:'body'}
);
.drop{
/*指针事件：无；*/
背景：红色；
}
埃勒姆先生{
/*z指数：3000；*/
背景：灰色；
}

填满
填满
把我放在这里

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" media="all">
    <link href="assets/css/custom.css" rel="stylesheet" media="all">
    <script type="text/javascript" src="assets/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="content">

        <div class="row"></div>

            <div class="draggable-divs col-md-12">
                <div class="elem col-md-1">
                    <a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a>
                    FILL
                </div>

                <div class="elem col-md-1">
                    <a href="#"><span class="glyphicon glyphicon-move pull-right"></span></a>
                    FILL
                </div>
            </div>

        <div class="row">
            <div class="drop col-md-12">
                Drop Me Here
            </div>
        </div>


    </div>


    <script>
        $(document).ready(
                function(){

                    $('.elem').draggable(
                            { appendTo: 'body' }
                    );

                }
        );
    </script>
</body>
</html>