blocks|key|707235|text|我不确定这是否适用于您的实际使用，但它适用于您的测试用例-在http://jsfiddle.net/sTD8y/27/更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|707236|我只是这样做的，只有当项目没有被删除时，才会使用内置的还原。如果已将其删除，则手动执行还原。您可以通过检查实际的CSS属性将其调整为某个计算出的偏移量，但我将允许您使用它，因为它在很大程度上依赖于draggable的CSS及其周围的DOM结构。|707237|$(function()+{
++++$("#draggable").draggable({
++++++++revert:++function(dropped)+{
+++++++++++++var+$draggable+=+$(this),
+++++++++++++++++hasBeenDroppedBefore+=+$draggable.data('hasBeenDropped'),
+++++++++++++++++wasJustDropped+=+dropped+&&+dropped[0].id+==+"droppable";
+++++++++++++if(wasJustDropped)+{
+++++++++++++++++//+don't+revert,+it's+in+the+droppable
+++++++++++++++++return+false;
+++++++++++++}+else+{
+++++++++++++++++if+(hasBeenDroppedBefore)+{
+++++++++++++++++++++//+don't+rely+on+the+built+in+revert,+do+it+yourself
+++++++++++++++++++++$draggable.animate({+top:+0,+left:+0+},+'slow');
+++++++++++++++++++++return+false;
+++++++++++++++++}+else+{
+++++++++++++++++++++//+just+let+the+built+in+revert+work,+although+really,+you+could+animate+to+0,0+here+as+well
+++++++++++++++++++++return+true;
+++++++++++++++++}
+++++++++++++}
++++++++}
++++});

++++$("#droppable").droppable({
++++++++activeClass:+'ui-state-hover',
++++++++hoverClass:+'ui-state-active',
++++++++drop:+function(event,+ui)+{
++++++++++++$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
++++++++++++$(ui.draggable).data('hasBeenDropped',+true);
++++++++}
++++});
});|code-block|syntax|javascript|707238|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sTD8y/27/^0|U|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I'm not sure if this will work for your actual use, but it works in your test case - updated at <a href="http://jsfiddle.net/sTD8y/27/" rel="noreferrer">http://jsfiddle.net/sTD8y/27/</a> .

I just made it so that the built-in revert is only used if the item has not been dropped before. If it has been dropped, the revert is done manually. You could adjust this to animate to some calculated offset by checking the actual CSS properties, but I'll let you play with that because a lot of it depends on the CSS of the draggable and it's surrounding DOM structure.

<pre><code>$(function() {
 $("#draggable").draggable({
 revert: function(dropped) {
 var $draggable = $(this),
 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
 wasJustDropped = dropped &amp;&amp; dropped[0].id == "droppable";
 if(wasJustDropped) {
 // don't revert, it's in the droppable
 return false;
 } else {
 if (hasBeenDroppedBefore) {
 // don't rely on the built in revert, do it yourself
 $draggable.animate({ top: 0, left: 0 }, 'slow');
 return false;
 } else {
 // just let the built in revert work, although really, you could animate to 0,0 here as well
 return true;
 }
 }
 }
 });

 $("#droppable").droppable({
 activeClass: 'ui-state-hover',
 hoverClass: 'ui-state-active',
 drop: function(event, ui) {
 $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
 $(ui.draggable).data('hasBeenDropped', true);
 }
 });
});
</code></pre>

blocks|key|923719|text|如果您想要将元素还原到源位置(如果它没有被放到#droppable元素中)，只需在脚本的开头保存可拖动对象的原始父元素(而不是位置)，如果您验证它没有被放入#droppable中，那么只需将#draggable的父元素恢复到这个原始元素即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|923720|因此，请替换以下内容：|923721|}).each(function()+{
++++var+top+=+$(this).position().top;
++++var+left+=+$(this).position().left;
++++$(this).data('orgTop',+top);
++++$(this).data('orgLeft',+left);
});|code-block|syntax|javascript|923722|有了这个：|923723|}).each(function()+{
++++$(this).data('originalParent',+$(this).parent())
});|923724|在这里，您将拥有可拖动对象的原始父元素。现在，你必须在一个精确的时刻恢复它的父节点。|923725|每次从droppable中拖出元素时，都会调用drop，而不是在停止时。因此，您添加了大量的事件回调。这是错误的，因为您从未清理过mouseup事件。revert是一个很好的地方，您可以挂接回调并检查元素是放在#droppable元素的内部还是外部，而您现在正在做这件事，所以，只需删除drop回调即可。|923726|当元素被拖放，并且需要知道它是否应该恢复时，您可以肯定地知道，在新的拖动开始之前，您将不会与用户进行任何其他交互。因此，使用您用来知道它是否应该恢复或知道的相同条件，让我们用一段代码替换这个alert：将父元素恢复到原始originalPosition，并从draggable内部重置div。revert属性是在_mouseStart时设置的，因此，如果您更改了元素的所有者，则应该重新设置它，以便使revert的动画转到适当的位置。因此，让我们将其设置为{top:+0,+left:+0}，使动画转到元素的原点：|923727|revert:+function(dropped)+{
++++var+dropped+=+dropped+&&+dropped[0].id+==+"droppable";
++++if(!dropped)+{
++++++++$(this).data("draggable").originalPosition+=+{top:0,+left:0}
++++++++$(this).appendTo($(this).data('originalParent'))
++++}
++++return+!dropped;
}|923728|就是这样！你可以在这里检查它的工作情况：http://jsfiddle.net/eUs3e/1/|923729|请考虑到，如果在任何jQuery的UI更新中，revert或originalPosition的行为发生变化，您将需要更新代码才能使其正常工作。请记住这一点。|923730|如果你需要一个不使用对ui.draggable内部调用的解决方案，你可以让你的body成为一个可丢弃的元素，并将greedy选项定义为false。您必须确保您的body元素占据整个屏幕。|923731|祝好运!|923732|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/eUs3e/1/^0|N|A|26|A|2N|A|0|0|0|0|0|0|N|4|1T|7|23|6|2X|A|3Z|4|0|2N|5|32|G|3L|9|4C|B|6C|H|0|0|K|S|0|0|N|6|U|G|0|13|4|1K|6|1V|5|28|4|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1N|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1P|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|21|8|@$9|22|A|23|B|C]|$9|24|A|25|B|C]|$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|W|3|X|5|J|7|2C|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|2D|8|@]|D|@$9|2E|A|2F|1|2G]]|E|$]]|$1|10|3|11|5|6|7|2H|8|@$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|12|3|13|5|6|7|2M|8|@$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]|$9|2T|A|2U|B|C]]|D|@]|E|$]]|$1|14|3|15|5|6|7|2V|8|@]|D|@]|E|$]]|$1|16|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]]|17|$18|$5|19|1A|1B|E|$1C|1D]]]]

If you want to revert the element to the source position if it's not dropped inside a <code>#droppable</code> element, just save the original parent element of the draggable at the start of the script (instead of the position), and if you verify that it's not dropped into <code>#droppable</code>, then just restore the parent of <code>#draggable</code> to this original element.

So, replace this:

<pre><code>}).each(function() {
 var top = $(this).position().top;
 var left = $(this).position().left;
 $(this).data('orgTop', top);
 $(this).data('orgLeft', left);
});
</code></pre>

with this:

<pre><code>}).each(function() {
 $(this).data('originalParent', $(this).parent())
});
</code></pre>

Here, you'll have the original parent element of the draggable. Now, you have to restore it's parent in a precise moment.

<code>drop</code> is called every time the element is dragged out from the droppable, not at the stop. So, you're adding a lot of event callbacks. This is wrong, because you never clean the <code>mouseup</code> event. A good place where you can hook a callback and check if the element was dropped inside or outside the <code>#droppable</code> element, is <code>revert</code>, and you're doing it right now, so, just delete the <code>drop</code> callback.

When the element is dropped, and needs to know if it should be reverted or not, you know for sure that you'll not have any other interaction from the user until the new drag start. So, using the same condition you're using to know if it should revert or know, let's replace this <code>alert</code> with a fragment of code that: restores the parent element to the original div, and resets the <code>originalPosition</code> from the <code>draggable</code> internals. The <code>originalPosition</code> proeprty is setted at the time of <code>_mouseStart</code>, so, if you change the owner of the element, you should reset it, in order to make the animation of revert go to the proper place. So, let's set this to <code>{top: 0, left: 0}</code>, making the animation go to the origin point of the element:

<pre><code>revert: function(dropped) {
 var dropped = dropped &amp;&amp; dropped[0].id == "droppable";
 if(!dropped) {
 $(this).data("draggable").originalPosition = {top:0, left:0}
 $(this).appendTo($(this).data('originalParent'))
 }
 return !dropped;
}
</code></pre>

And that's it! You can check this working here: <a href="http://jsfiddle.net/eUs3e/1/" rel="noreferrer">http://jsfiddle.net/eUs3e/1/</a>

Take into consideration that, if in any jQuery's UI update, the behavior of <code>revert</code> or <code>originalPosition</code> changes, you'll need to update your code in order to make it work. Keep in mind that.

If you need a solution which doesn't make use of calls to the internals of ui.draggable, you can make your <code>body</code> an droppable element with <code>greedy</code> option defined as <code>false</code>. You'll have to make sure that your <code>body</code> elements take the full screen.

Good luck!

blocks|key|707413|text|这与恢复原点有关:在拖动对象时设置原点:只需使用$(this).data("draggable").originalPosition+=+{top:0,+left:0};|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|707414|例如:我这样使用|707415|drag:+function()+{
++++++++var+t+=+$(this);
++++++++left+=+parseInt(t.css("left"))+*+-1;
++++++++if(left+>+0+){
++++++++++++left+=+0;
++++++++++++t.draggable(+"option",+"revert",+true+);
++++++++++++$(this).data("draggable").originalPosition+=+{top:0,+left:0};
++++++++}+
++++++++else+t.draggable(+"option",+"revert",+false+);

++++++++$(".slider-work").css("left",++left);
++++}|code-block|syntax|javascript|707416|entityMap^0|O|1P|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

It's related about revert origin : to set origin when the object is drag : just use <code>$(this).data(&quot;draggable&quot;).originalPosition = {top:0, left:0};</code>
For example : i use like this
<pre class="lang-js prettyprint-override"><code>drag: function() {
 var t = $(this);
 left = parseInt(t.css(&quot;left&quot;)) * -1;
 if(left &gt; 0 ){
 left = 0;
 t.draggable( &quot;option&quot;, &quot;revert&quot;, true );
 $(this).data(&quot;draggable&quot;).originalPosition = {top:0, left:0};
 } 
 else t.draggable( &quot;option&quot;, &quot;revert&quot;, false );

 $(&quot;.slider-work&quot;).css(&quot;left&quot;, left);
 }
</code></pre>

blocks|key|923854|text|如果有人感兴趣，这里是我对这个问题的解决方案。它完全独立于Draggable对象工作，而是使用Droppable对象上的事件。它工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923855|$(function()+{
++++$(".draggable").draggable({
++++++++opacity:+.4,
++++++++create:+function(){$(this).data('position',$(this).position())},
++++++++cursor:'move',
++++++++start:function(){$(this).stop(true,true)}
++++});

++++$('.active').droppable({
++++++++over:+function(event,+ui)+{
++++++++++++$(ui.helper).unbind("mouseup");
++++++++},
++++++++drop:function(event,+ui){
++++++++++++snapToMiddle(ui.draggable,$(this));
++++++++},
++++++++out:function(event,+ui){
++++++++++++$(ui.helper).mouseup(function()+{
++++++++++++++++snapToStart(ui.draggable,$(this));+
++++++++++++});
++++++++}
++++});
});+

function+snapToMiddle(dragger,+target){
++++var+topMove+=+target.position().top+-+dragger.data('position').top+%2B+(target.outerHeight(true)+-+dragger.outerHeight(true))+/+2;
++++var+leftMove=+target.position().left+-+dragger.data('position').left+%2B+(target.outerWidth(true)+-+dragger.outerWidth(true))+/+2;
++++dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
function+snapToStart(dragger,+target){
++++dragger.animate({top:0,left:0},{duration:600,easing:'easeOutBack'});
}|code-block|syntax|javascript|923856|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case anyone's interested, here's my solution to the problem. It works completely independently of the Draggable objects, by using events on the Droppable object instead. It works quite well:

<pre><code>$(function() {
 $(".draggable").draggable({
 opacity: .4,
 create: function(){$(this).data('position',$(this).position())},
 cursor:'move',
 start:function(){$(this).stop(true,true)}
 });

 $('.active').droppable({
 over: function(event, ui) {
 $(ui.helper).unbind("mouseup");
 },
 drop:function(event, ui){
 snapToMiddle(ui.draggable,$(this));
 },
 out:function(event, ui){
 $(ui.helper).mouseup(function() {
 snapToStart(ui.draggable,$(this)); 
 });
 }
 });
}); 

function snapToMiddle(dragger, target){
 var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
 var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
 dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
function snapToStart(dragger, target){
 dragger.animate({top:0,left:0},{duration:600,easing:'easeOutBack'});
}
</code></pre>

blocks|key|707550|text|我已经找到了另一种简单的方法来解决这个问题，你只需要像下面的代码一样将“connectToSortable:”属性添加到draggable：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707551|$("#a1,#a2").draggable({
++++++++connectToSortable:+"#b,#a",
++++++++revert:+'invalid',
++++});|code-block|syntax|javascript|707552|PS:更多细节和示例|707553|How+to+move+Draggable+objects+between+source+area+and+target+area+with+jQuery|offset|length|707554|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/51682909/how-to-move-draggable-objects-between-source-area-and-target-area-with-jquery/51683501#51683501^0|0|0|0|0|25|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I've found another easy way to deal with this problem, you just need the attribute " connectToSortable:" to draggable like as below code: 

<pre><code>$("#a1,#a2").draggable({
 connectToSortable: "#b,#a",
 revert: 'invalid',
 });
</code></pre>

PS: More detail and example 
<a href="https://stackoverflow.com/questions/51682909/how-to-move-draggable-objects-between-source-area-and-target-area-with-jquery/51683501#51683501">How to move Draggable objects between source area and target area with jQuery</a>

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 href="http://jsfiddle.net/sTD8y/1/" rel="noreferrer">a sample on jsFiddle</a>.

HTML

<pre><code>&lt;div id="origin"&gt;
 &lt;div id="draggable" class="ui-widget-content"&gt;
 &lt;p&gt;I revert when I'm not dropped&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;div id="droppable" class="ui-widget-header"&gt;
 &lt;p&gt;Drop me here&lt;/p&gt;
&lt;/div&gt;
</code></pre>

JavaScript

<pre><code>$(function() {
 $("#draggable").draggable({ 
 revert: function(dropped) {
 var dropped = dropped &amp;&amp; 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 };
 });
 }
 });
});
</code></pre>

Revert a jQuery draggable object back to its original container on out event of droppable

容器

jQuery

我有一个可拖动的项目，如果不是放在一个可丢弃的项目中，它将恢复。这很好用，直到用户在droppable中拖出一个项目。如果他们认为他们犯了一个错误，那么每当他们拉出可拖放对象时，它就会恢复为可放放对象。我更喜欢on out并停用draggable返回到它的原始容器。我的代码如下，但我提供了。HTML<div id="o...

问事件输出时，将jQuery可拖动对象恢复到其原始容器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问事件输出时，将jQuery可拖动对象恢复到其原始容器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问事件输出时，将jQuery可拖动对象恢复到其原始容器
EN