واجهة مستخدم jQuery قابلة للسحب إلى وحدات أصغر يمكن إسقاطها
-
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
});
حاول استبدال الكود الخاص بك بهذه الكتلة أعلاه ومعرفة ما إذا كان يقترب مما تريده.قد لا يكون الأمر مثاليًا بعد، ولكن دعونا نرى ما إذا كان بإمكاننا التعامل مع تغيير واحد في كل مرة.ما آمل أن ألاحظه هو أنه ينخفض تقريبًا كما ينبغي.
لا تنتمي إلى StackOverflow