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

【问题标题】：jQuery draggable is not working within a particular divjQuery 可拖动在特定 div 中不起作用
【发布时间】：2015-02-06 09:49:37
【问题描述】：

我正在尝试使用 jQueryUI 和 Bootstrap 创建一个可拖动的 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>

谁能帮帮我？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap jquery-ui

【解决方案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>

【讨论】：