问题描述
所以我试图制作一个日程表,可以将讲座从一个单元格拖到另一个单元格,除非新单元格已经有一个讲座,在这种情况下拖动将被拒绝。我试图通过从单元格中添加和删除类 'has_lecture' 来指示它是否应该允许将单元格移入或不这样做。 这是我的代码..但由于某种原因删除类不起作用。
$(".draggable").draggable({
revert: 'invalid'
});
$(".droppable").droppable({
accept: function () {
return (!$(this).hasClass('has_lecture'))
},drop: function (event,ui) {
var $this = $(this);
ui.draggable.position({
my: "center",at: "center",of: $this,using: function (pos) {
$(this).animate(pos,200,"linear");
}
});
$(this).addClass('has_lecture')
},out: function () {
// this line doesn't work
$(this).removeClass('has_lecture')
}
});
解决方法
只要可拖动对象移动到可放置对象上,accept 函数就会运行。这意味着它会在您拖入时进行检查,并且也 在您拖出时进行检查。一旦您将其放入并设置 has_lecture
类,您的 accept 函数就会在您尝试将其拖出时运行,并且由于它具有 has_lecture
类,因此它始终返回 false,并且永远不会给出您的 { {1}} 函数有机会运行。
因此,了解这种意外行为后,想法是:如果放置区为空,则仅当它没有 has_lecture 类时才应接受。但是如果 dropzone 不为空,它应该继续接受当前在其中的元素。这将允许您将其拖出。因此,一旦您将一个元素拖入拖放区,通过 out
在拖放区存储对该元素的引用,现在您的接受函数可以检查您尝试拖入的元素是 还是 out 是已经被拖进去的那个。
(添加了 HTML 和 css 以便代码段可以运行)
$(this).data('dropped',ui.draggable)
$(function () {
$(".draggable").draggable({
// revert: 'invalid'
});
$(".droppable").droppable({
accept: function (draggable) {
// new code: new accept clause,accept is not has_lecture OR if the element already dragged onto it is the one you are attempting to drag out
return (!$(this).hasClass('has_lecture') || $(this).data('dropped') && $(this).data('dropped').is(draggable))
},drop: function (event,ui) {
var $this = $(this); // << your existing code
ui.draggable.position({ // << your existing code
my: "center",// << your existing code
at: "center",// << your existing code
of: $this,// << your existing code
using: function (pos) { // << your existing code
$(this).animate(pos,200,"linear"); // << your existing code
} // << your existing code
}); // << your existing code
$this.addClass('has_lecture'); // << your existing code
// new code: store a reference to the dropped element on the drop zone
$this.data('dropped',ui.draggable)
},out: function () {
$(this).removeClass('has_lecture'); // << your existing code
// new code: once you have moved it out,then delete the reference to it since your drop zone is now empty again
$(this).data('dropped',null);
}
});
});
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border: 1px solid black;
}
.droppable {
width: 120px;
height: 120px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid black;
}
h3 {
clear: left;
}
.has_lecture {
background-color: blue;
}