0
私は小さなツールを開発しています。これまでのところ動作しますが、droppable（オプション 'tolerance' 'フィット'に設定されている）は明らかに垂れ下がりの境界を気にしません。jQuery - tolerance：droppableの 'fit'は、droppableの境界設定を気にしません。
こちらをご覧ください：フィドルから抽出http://jsfiddle.net/scraddy/8geEB/20/
関連のjavascript：
$("#dropzone").droppable({
hoverClass: "ui-drop-hover",
tolerance: "fit",
drop: function(event, ui) {
$("#dropzone p").hide();
$("#pix img").draggable("disable").hover(function() {
$(this).css({
cursor: "default"
});
});
}
});
$("#pix img").draggable({
cursor: "move",
revert: "invalid",
helper: "clone",
stop: function(event, ui) {
if ($("#dropzone p").is(":hidden")) {
$(ui.helper).clone().appendTo($("#dropzone")).resizable({
handles: 'se',
maxHeight: 200,
minHeight: 25,
aspectRatio: true,
ghost: true,
autoHide: true,
stop: function(event, ui) {
var ximg = ui.position.left + ui.size.width;
var xdrop = $("#dropzone").offset().left + $("#dropzone").width();
var yimg = ui.position.top + ui.size.height;
var ydrop = $("#dropzone").offset().top + $("#dropzone").height();
if (ximg > xdrop || yimg > ydrop) {
$(this).position({
my: "right bottom",
at: "right bottom",
of: "#dropzone",
offset: ((xdrop - ximg) < 0 ? 0 : -(xdrop - ximg)) + " " + ((ydrop - yimg) < 0 ? 0 : -(ydrop - yimg))
});
}
}
}).parent().draggable({
disabled: false,
helper: "original",
containment: "#dropzone",
create: function(event, ui) {
if ($("#testing").size() === 0) {
$("#dropzone div.ui-wrapper").append('<img id="testing" src="http://palmenhandel-witten.de/img/close.png" width="16" height="16" alt="Bild entfernen" />');
$("img#testing").click(function() {
$("#dropzone p").fadeIn(350);
$("#dropzone div.ui-wrapper").resizable('destroy').draggable('destroy');
$(".ui-draggable-dragging").fadeOut(350, function() {
$(this).remove()
});
$("#pix img").draggable("enable").hover(function() {
$(this).css({
cursor: "move"
});
});
});
}
$("#dropzone div.ui-wrapper").bind("mouseenter mouseleave", function(event) {
$("img#testing").toggleClass("over");
});
}
});
}
}
}).hover(function() {
$(this).css({
cursor: "move"
});
});
をあなたがドロップ可能に画像をドラッグすると、それが終わってのドロップ可能となし一部の上に完全なとき、それが唯一受け入れられるべきですドロップ可能な境界線。境界線は、もちろん、ドロップ可能に属していますが、これにはおそらく回避策があるかどうか自問しています。
私はドロップした後にドラッグ可能な場所を手動で再配置することを考えましたが、これは面倒です。