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>