2016-07-27 39 views
0

嗨,大家好,我一直在努力掙扎幾天,我即將發脾氣。計劃是從列表中拖出一個圖標,將所述項目的克隆放入指定區域(在光標位置),然後用戶可以根據需要調整克隆的大小。拖動,克隆和調整大小按計劃工作。然而,下降導致我無法解決問題。當放下物品時,它會大量移動到左側(使用負向左側定位),並且在它應該坐的區域之外。我嘗試了所有我能想到的並且無法自己解決這個問題的東西。任何幫助將非常感激。Jquery-ui droppable創造不想要的負面左邊位置

<script> 
 
    $(document).ready(function($) { 
 

 
    $(".droppable").droppable({ 
 
     accept: '.draggable', 
 
     drop: function(event, ui) { 
 
     var $clone = ui.helper.clone(); 
 
     if (!$clone.is('.inside-droppable')) { 
 
      $(this).append($clone.addClass('inside-droppable').draggable({ 
 
      containment: '.droppable', 
 
      tolerance: 'pointer', 
 
      position: 'relative' 
 
      })); 
 

 
      $clone.resizable({ 
 
      aspectRatio: 'true', 
 
      ghost: 'true', 
 
      handles: 'ne, nw, se, sw', 
 
      }); 
 
     } 
 
     } 
 
    }); 
 
    $(".draggable").draggable({ 
 
     helper: 'clone', 
 
     revert: "invalid" 
 
    }); 
 
    }); < /script>
#content { 
 
    height: auto; 
 
    margin-top: 10px; 
 
    margin-left: 0; 
 
    min-height: 0px; 
 
    clear: both; 
 
} 
 
#form-window.scheme { 
 
    width: 97%; 
 
    height: 100%; 
 
    max-height: 760px; 
 
    padding-top: 0px; 
 
    padding-left: 0px; 
 
    padding-right: 3%; 
 
    padding-bottom: 0px; 
 
    overflow-y: hidden; 
 
    position: relative; 
 
    background-color: #ffffff; 
 
} 
 
#icon_menu { 
 
    width: 45px; 
 
    right: 381px; 
 
    position: absolute; 
 
} 
 
#icon_menu li { 
 
    width: 45px; 
 
    height: 45px; 
 
    margin-top: 6px; 
 
    position: absolute; 
 
} 
 
.draggable { 
 
    width: 45px; 
 
    height: 45px; 
 
    border-radius: 50%; 
 
    background: rgba(127, 214, 236, 0.5); 
 
    cursor: pointer; 
 
} 
 
.droppable { 
 
    position: absolute; 
 
    width: 71%; 
 
    height: 100%; 
 
    border: 1px solid #000; 
 
}
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 

 

 

 
<div id="content"> 
 
    <div id="form-window" class="scheme"> 
 
    <ul id="icon_menu"> 
 
     <li class="draggable"></li> 
 
    </ul> 
 
    <div class="droppable"></div> 
 
    </div> 
 
</div>

回答

0

最終發現了這個問題。一旦我改變了ul的位置,相對一切工作正常。爲什麼這導致下降不正確的位置,我不知道,但相對位置伎倆。

#icon_menu { 
width: 45px; 
right: 381px; 
position: relative; 
} 
相關問題