Question

这是我的演示，我只是想当我拖动可拖动的div悬停一个可放置的div时，会有另一个div创建并带有droppable等等，在此期间按住鼠标

它有时会起作用，但大部分都没有，请帮我查一下这个谢谢！

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

Answer 1

默认情况下，

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

＆＃13;

$(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          
                    });
                });
            }
        });

＆＃13;

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

＆＃13;

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

＆＃13;

我想在鼠标悬停一个droppable时创建一个新的droppable

1 个答案: