2013-02-19 74 views
0

当前我试图拾取jQuery并建立一个拖动&拖放环境。我设法让大部分工作都能正常工作。但是,当我试图将2个物品拖放到放置区域时,随后的物品放置将始终具有大于先前物品放置的Y位置放置。jQuery可拖动的鼠标位置问题约束

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

PS:虽然我测试这个用户界面的快速拖动它跨越一个大小下拉窗口与滚动条在可放置区域大于窗口大小的一侧,拖动项目将管理以逃避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> 

回答

0

没关系找到了解决办法,解决它通过设置克隆具有绝对位置