Question

目前我正在尝试拾取jQuery并构建一个拖动和放大器放下环境。我设法让大部分工作都有效。但是，当我尝试将多于2个项目拖入拖放区域时，后续项目下降将始终具有比先前项目下降更大的Y位置下降。

任何人都知道问题出在哪里？提前谢谢你......

PS：当我通过在可缩放区域大于窗口大小的一侧使用滚动条快速拖动它来测试此UI时，拖动项将设法转义jQuery包含集。哪个最终隐藏或背景中的脏元素。是否有更好的方法和更简洁的方法来编写拖放网络环境？

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://stkxp/metasphere/fac/home/home.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script>
        $(
            function(){
                $("#menu").draggable();

                $(".drag").draggable(
                    {helper:'clone'}
                );

                $("#drop").droppable(                        
                    {
                        accept:'.drag',
                        drop:function(event,ui){

                                newID = $.datepicker.formatDate('@', new Date() );

                                $(this).append(                                        
                                    $(ui.draggable).clone().attr(
                                        {
                                            id:newID
                                        }
                                    )
                                );

                                $("#"+newID).css(
                                    {                                            
                                        top: event.pageY +"px",
                                        left: event.pageX-this.offsetLeft +"px"
                                    }
                                );

                                $("#"+newID).addClass("node");    

                                $("#"+newID).removeClass("drag");

                                $("#"+newID).draggable(
                                    {
                                        containment:$("#drop")
                                    }
                                );

                            }
                    }
                )


            }
        );
    </script>

    <style>        
        #drop{
            width:55%;
            min-width:400px;    

            min-height:1000px;

            float:left;
            border:1px solid blue;    
        }
        #property{
            width:24%;
            min-width:235px;        

            float: left;
            border:1px solid black;                
        }            
    </style>        
</head>
<body>
    <div id="drop"></div>
    <div id="property">            
        <div class="drag">-> Item 1</div>                                 
    </div>        
</body>

Answer 1

没关系找到解决方案，通过将克隆设置为具有绝对位置来解决它

jQuery可拖动与鼠标位置问题的droppable约束

1 个答案: