0

目前我正在尝试使用 jQuery 并构建一个拖放环境。我设法让大部分工作正常进行。但是，当我尝试将 2 个以上的项目拖入放置区域时，后续项目放置的 Y 位置放置将始终大于前一个项目放置的 Y 位置放置。

有谁知道问题出在哪里？先感谢您...

PS：当我通过在可放置区域大于窗口大小的一侧使用滚动条快速拖动它来测试此 UI 时，拖动项将设法逃脱 jQuery 包含集。最终在后台隐藏或脏元素。是否有更好的方法和更清洁的方法来编写拖放 Web 环境？

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

4

1 回答 1

0

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

于 2013-02-20T21:59:32.673 回答