当我的鼠标悬停可放置时，我想创建一个新的放置答案

【问题标题】：i want to create a new droppable when my mouse hover a droppable当我的鼠标悬停可放置时，我想创建一个新的放置
【发布时间】：2015-06-05 10:08:47
【问题描述】：

这是我的演示，我只想在拖动可拖动的 div 时将鼠标悬停在可放置的 div 上，然后创建另一个 div 并使用可放置的 div 等等，在此期间按住鼠标

它有时会起作用，但大多数情况下不会，请帮我检查一下，谢谢！

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery-ui-1.7.2.js"></script>
    <style>
        .drag { float: left;width: 50px; height: 50px; background: #ccc; }
        .drop { float: left;margin: 10px; width: 60px; height: 60px; background: #999; color: #fff; padding: 10px; }
    </style>
    <script>
        $(document).ready(function(){
            var i=0;

            $( ".drag" ).draggable();
            $( ".drop" ).droppable({
                drop: drop,
                over: zhuce
            }); 

            function drop(){
                alert("drop"+$(this).html());
            }

            function zhuce( event, ui ) {
                console.log("now fly over-->"+$(this).html());
                newDIV();
            }

            function out( event, ui ) {
                console.log("out-->"+$(this).html());
            }

            function newDIV(){
                i++;
                var a = $("<div>",{class:"drop",html:i});
                $("body").append(a);
                var list = $(".drop");
                list.each(function(x,node){
                    $(node).droppable({
                        tolerance: 'intersect',
                        over: zhuce,
                        drop: drop          
                    });
                });
            }
        });
    </script>
</head>
<body>
    <div class="drag">Drag me</div>
    <div class="drop">Drop here</div>
</body>

【问题讨论】：

标签： jquery droppable

【解决方案1】：

Draggable 默认情况下不会更新droppable 信息，因此当您添加新信息时，它们不会被拖动的项目考虑在内。如果您将鼠标拖出屏幕，它似乎会以某种方式刷新计算，所以我想这就是为什么有时它有时不起作用的原因。但是有一种方法可以系统化droppable 的计算，它是称为refreshPositions 的选项。如果您将其设置为 true，那么它将计算 droppable 在 mousemove 上的位置，并且您的代码将正常工作。见：

$(document).ready(function(){
            var i=0;

            $( ".drag" ).draggable(
                {
                    refreshPositions: true
                });
            $( ".drop" ).droppable({
                drop: drop,
                over: zhuce
            }); 

            function drop(){
                alert("drop"+$(this).html());
            }

            function zhuce( event, ui ) {
                
                console.log("now fly over-->"+$(this).html(), $(this).draggable('instance'));
                newDIV();
            }

            function out( event, ui ) {
                console.log("out-->"+$(this).html());
            }

            function newDIV(){
                i++;
                var a = $("<div>",{class:"drop",html:i});
                $("body").append(a);
                
                var list = $(".drop");
                list.each(function(x,node){
                    
                    $(node).droppable({
                        tolerance: 'intersect',
                        over: zhuce,
                        drop: drop          
                    });
                });
            }
        });

 .drag { float: left;width: 50px; height: 50px; background: #ccc; }
        .drop { float: left;margin: 10px; width: 60px; height: 60px; background: #999; color: #fff; padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="drag">Drag me</div>
    <div class="drop">Drop here</div>

【讨论】：

是的，它有效！我所有的工作都在 droppable 上，而不是在 draggable 上，非常感谢！