jquery UI中draggable 的revert如何在drop后取消?

kjah 2008-11-06 12:56:59

引用官方的例子，加上 revert:true



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

                    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  

  <script>

  $(document).ready(function(){

    $(".block").draggable({helper: 'clone',revert:true});

$(".drop").droppable({

  accept: ".block",

  activeClass: 'droppable-active',

  hoverClass: 'droppable-hover',

  drop: function(ev, ui) {

   $(this).append("<br>Dropped!");

  }

});

  });

  </script>

  <style>.block { 

   position: absolute;

   top: 5px;

   left: 5px;

   border: 2px solid #0090DF;

   background-color: #68BFEF;

   width: 75px; 

   height: 75px;

   margin: 10px;

   z-index: 100;

}

.drop { 

background-color: #e9b96e;

border: 3px double #c17d11;

width: 150px; 

height: 70px;

margin: 10px; 

position: absolute;

top: 5px;

right: 5px;

opacity: 0.7;

overflow:auto;

}

.droppable-active {

opacity: 1.0;

}

.droppable-hover {

outline: 1px dotted black;

}</style>

</head>

<body>

  

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>

<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.droppable.js"></script>

<div class="block">drag me!</div>

<div class="drop">drop on me!</div>

</body>

</html>

怎么写才能让revert取消掉？就是说被放在右边方块后就不要有恢复的动作了。

...全文

548 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

kjah 2008-11-07

打赏
举报

查看源码后，又去看了jquery ui doc,原来JQ有提供设置此功能的接口

http://docs.jquery.com/UI/Draggables/draggable#options

[Quote=引用 jquery ui doc:]
revert Boolean Default: false
If set to true, the element will return to its start position when dragging stops. Also accepts the strings "valid" and "invalid": If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.
[/Quote]

只要设置revert:"invalid"就可以了，原来没有仔细细读doc。

哎～让人头疼的弱类型语言，写着接受Boolean值，结果又可以接受String

kjah 2008-11-07

打赏
举报

kjah 2008-11-07

打赏
举报

斯洛文尼亚旅游 2008-11-07

打赏
举报

我是不知道怎么改，我不太熟悉jq，所以只好在js文件上面改了

不知道提供了api没有，没有说明书

kjah 2008-11-07

打赏
举报

感谢showbo
看ui.draggable.js里那么多代码就没去细看，定位到这个地方很麻烦吧，再次感谢～辛苦了
这个功能不算特偏吧，没想到JQ没有给留个接口，还要去改api。

Longinc 2008-11-06

打赏
举报

友情UP

斯洛文尼亚旅游 2008-11-06

打赏
举报

这个你的修改jquery的API里面的代码了

修改ui.draggable.js里面的mouseStop如下

mouseStop: function(e) {

		

		//If we are using droppables, inform the manager about the drop

		var dropped = false;

		if ($.ui.ddmanager && !this.options.dropBehaviour)

			var dropped = $.ui.ddmanager.drop(this, e);

			

		if((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true) {		

		//===============================下面是被修改的

			if(dropped){//如果在容器上释放了鼠标则直接把动画过程去掉

			  this.propagate("stop", e);

			  this.clear();

			}

			else//不在容器上释放则播放动画

			{

			  var self = this;

			  $(this.helper).animate(this.originalPosition, parseInt(this.options.revert, 10) || 500, function() {

			  	self.propagate("stop", e);

				self.clear();

			  });

			}

			//=================================

			

		} else {

			this.propagate("stop", e);

			this.clear();

		}

		

		return false;

	}