小さなドロップ可能にjQueryのUIのドラッグ可能
-
23-09-2019 - |
質問
私が使用しています。この http://jqueryui.com/demos/droppable/する
しかし、私はドラッグよりも小さいドロップ可能にドラッグ問題を抱えている。
それがドロップ可能なの左上にドロップ可能にドロップしますが、しません。
の
<サブ>(ソース: yart.com.au の)サブ>
どのような方法がこの問題を回避ありますか?
ここでコードがある、感謝ます。
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
$(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail");
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
$('.imageContainer').droppable({
accept: '.draggable',
drop: function(event, ui) {
ui.draggable.css({
"position": "relative",
"left": "0px",
"top": "0px"
});
if ($(this).children().length == 0) {
// ui.draggable.addClass("thumbnail");
$(ui.draggable).appendTo(this);
$(this).removeClass("border");
}
},
over: function(event, ui) {
ui.draggable.removeClass("enlarge");
ui.draggable.addClass("thumbnail");
$(this).addClass("border");
},
out: function(event, ui) {
// ui.draggable.removeClass("zoomIn")
$(this).removeClass("border");
},
tolerance: 'intersect'
});
CSSます:
.thumbnail {
height:60px;
margin-right:10px;
width:80px;
z-index:1;
}
.enlarge {
border:5px solid white;
height:145px;
width:195px;
}
解決
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
/* $(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail"); */
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
上記のこのブロックを使用して、コードを交換してみてください、それはあなたが望むものに近づくかどうかを確認します。それはまだ完璧ではなく、我々は一度に1つの変更に取り組むことができるかどうかを見てみましょうしないことがあります。私が観察するために望んでいることはそれが必要のように、それはおよそ低下することがある。
所属していません StackOverflow