Question

我试图用jQueryUI＆amp;创建一个可拖动的div。引导。我已经创建了可拖动的div，但是如果将可拖动的div放在另一个div中，它就不再可移动了。（第二个div不是一个可分离的。）

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

有人可以帮助我吗？

Answer 1

drop的{{1}}高于z-index。你不是把你的可拖动物品放在div上，而是放在下面。那么你就不能再拖了它。

您可以为可拖动项设置高elem值，以确保它们高于其他任何值，或者为您放置的元素设置z-index。

这应该解释你的代码中发生了什么（看看区别，取消注释其中一种样式）：

pointer-events: none;

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

.drop{
    /* pointer-events: none; */  
    background : red;
}
.elem{ 
    /* z-index: 3000; */ 
    background : grey;
}

jQuery draggable不能在特定的div中工作

1 个答案: