0
こんにちは、私は数日間このことに苦労してきました。計画は、リストからアイコンをドラッグし、前記アイテムのクローンを（カーソル位置にある）指定された領域にドロップすることであり、ユーザは、必要に応じてクローンのサイズを変更することができる。ドラッグ、クローン、サイズ変更は、計画どおりに動作します。しかし、この低下は私に問題の終わりをもたらしている。アイテムを落とすときは、負の左の位置を使用して左に大きく移動し、divの外に座っているはずです。私は考えることができるすべてを試しましたが、この問題を自分で解決することはできません。どんな助けでも大歓迎です。最終的に問題を見つけた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>