我有一个可拖动的项目，如果不放在 droppable 中，它将恢复.这很有效，直到用户在 droppable 中放置一个项目.如果他们决定在任何时候都犯了错误，那么他们将可拖动对象拉出，它会恢复为可放置对象.我更喜欢关闭并停用可拖动对象返回其原始容器.
我的代码在下面，但我已经提供了一个关于 jsFiddle 的示例.
HTML
<div id="draggable" class="ui-widget-content"><p>当我没有掉线时我会回复</p><div id="droppable" class="ui-widget-header"><p>把我放在这里</p>
JavaScript
$(function() {$("#draggable").draggable({恢复:功能(删除){var 下降 = 下降 &&丢弃[0].id ==可丢弃"；if(!dropped) alert("我正在恢复！");返回 !dropped;}}).each(函数(){var top = $(this).position().top;var left = $(this).position().left;$(this).data('orgTop', top);$(this).data('orgLeft', left);});$("#droppable").droppable({activeClass: 'ui-state-hover',悬停类:'ui-state-active'，下降:功能(事件，用户界面){$(this).addClass('ui-state-highlight').find('p').html('Dropped!');},出:功能(事件，用户界面){//不起作用，但像这样ui.draggable.mouseup(函数(){var top = ui.draggable.data('orgTop');var left = ui.draggable.data('orgLeft');ui.position = { 顶部:顶部，左侧:左侧 };});}});});$(function() {$("#draggable").draggable({恢复:功能(事件，用户界面){//在旧版本的 jQuery 上使用draggable"；//$(this).data(可拖动")//在 2.x 版本的 jQuery 上使用ui-draggable"；//$(this).data(ui-draggable")$(this).data("uiDraggable").originalPosition = {顶部:0，左:0};//返回布尔值返回！事件；//评估如下://返回事件 !== false ?假:真；}});$(#droppable").droppable();});I have a draggable item which if not dropped in a droppable will revert. This works well until a user drops an item in the droppable. If they decide they've made a mistake anytime they pull the draggable out it reverts to the droppable. I would prefer that on out and deactivate the draggable goes back to its original container.
My code is below but I have provided a sample on jsFiddle.
HTML
<div id="origin">
<div id="draggable" class="ui-widget-content">
<p>I revert when I'm not dropped</p>
</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
JavaScript
$(function() {
$("#draggable").draggable({
revert: function(dropped) {
var dropped = dropped && dropped[0].id == "droppable";
if(!dropped) alert("I'm reverting!");
return !dropped;
}
}).each(function() {
var top = $(this).position().top;
var left = $(this).position().left;
$(this).data('orgTop', top);
$(this).data('orgLeft', left);
});
$("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
},
out: function(event, ui) {
// doesn't work but something like this
ui.draggable.mouseup(function () {
var top = ui.draggable.data('orgTop');
var left = ui.draggable.data('orgLeft');
ui.position = { top: top, left: left };
});
}
});
});
$(function() {
$("#draggable").draggable({
revert : function(event, ui) {
// on older version of jQuery use "draggable"
// $(this).data("draggable")
// on 2.x versions of jQuery use "ui-draggable"
// $(this).data("ui-draggable")
$(this).data("uiDraggable").originalPosition = {
top : 0,
left : 0
};
// return boolean
return !event;
// that evaluate like this:
// return event !== false ? false : true;
}
});
$("#droppable").droppable();
});
这篇关于在发生 droppable 事件时将 jQuery 可拖动对象恢复到其原始容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！