jQuery 可拖动在特定 div 中不起作用

Question

我正在尝试使用 jQueryUI 和 Bootstrap 创建一个可拖动的 div。我已经创建了 draggable div，但是如果将 draggable 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 的 z-index 高于 elem。您不是将可拖动项目放在 div 上，而是放在下面。这样就不能再拖了

您可以为可拖动的项目设置一个高 z-index 值以确保它们高于其他任何东西，或者为您放置的元素设置 pointer-events: none;。

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<div class="content"> 
    <div class="row">        
        <div class="draggable-divs col-md-12">
            <div class="elem col-md-12">
                <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>
    <div class="row">
        <div class="drop col-md-12">
            Drop Me Here
        </div>
    </div>  
</div>

jQuery 可拖动在特定 div 中不起作用

jQuery draggable is not working within a particular div

javascript

css

jquery

jquery-ui

twitter-bootstrap