Question

我有以下测试代码似乎只是关于工作

但是，如果我想在最后拖放其中一个DIV项目，有时它会在结尾处掉落，有时它会在最后但一个位置掉落。我错过了一些明显的东西吗？

我尝试过各种各样的事情，比如宽容，但似乎并没有太大区别。

	$(function(){

		$('#widgets1').sortable(
		
		{
		  update: function (event, ui) { 
			var productOrder = $(this).sortable('toArray').toString();
			console.log(productOrder);
		  },

		  placeholder: "target1",
		  
		  helper:'clone',

		  start: function(e, ui) {
			  $(ui.helper).addClass('dragon');
		  },
		  stop: function(e, ui) {
			  $(ui.helper).removeClass('dragon');
		  },
		  
		  change: function(event, ui) {
			ui.placeholder.css({visibility: 'visible', border : '1px solid yellow'});
			},
		  
		  tolerance: "intersect"
		
		}
		
		
		);

	})

#widgets1{ border:1px solid blue; margin-left:50px;margin-top:20px; position:relative; }

	h3{ font-size:2.0em; }

	.dragon{
	  border:8px dotted black!important;
	}

	.box1{
	  width:200px;
	  height:200px;
	  float:left!important;
	}

	.box1a{
	  border-color:blue;
	}
	.box1b{
	  border-color:red;
	}
	.box1c{
	  border-color:green;
	}
	.box1d{
	  border-color:orange;
	}
	.box1e{
	  border-color:cyan;
	}

	.target1{
	  
	  border:2px solid purple!important;
	  background-color:black!important;
	  /*z-index:999999!important;*/
	  color:yellow!important;
	  opacity:0.3!important;
	  width:200px;
	  height:200px;
	  
	}

	.holder1{
	  border:1px solid red;
	  width: 500px !important;
	}

<!DOCTYPE html>
	<html>
	<head>
	<title>test</title>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>	  
	</head>
	<body>
	  <div style="float:left;clear:both" id="widgets1" class="holder1">

	<div id="11" style="position: relative;" class="sortable box1 box1a">
			<h3>
			ROW 1
			</h3>
		</div>

	<div id="12" style="position: relative;" class="sortable box1 box1b">
			<h3>
			ROW 2
			</h3>
		</div>

	<div id="13" style="position: relative;" class="sortable box1 box1c">
			<h3>
			ROW 3
			</h3>
		</div>

	<div id="14" style="position: relative;" class="sortable box1 box1d">
			<h3>
			ROW 4
			</h3>
		</div>

	<div id="20" style="position: relative;" class="sortable box1 box1e">
			<h3>
			ROW 5
			</h3>
		</div>

	</div>

	</body>
	</html>

Answer 1

我注意到的第一件事是你的jQuery版本已经过时了。这两个都是在2011年发布的......

https://blog.jquery.com/2011/11/03/jquery-1-7-released/

http://blog.jqueryui.com/2011/08/jquery-ui-1-8-16/

您是否可以使用较新的版本？另外，我看到.box1有一个css float属性。根据我的经验，float可能会对jQuery UI产生一些意想不到的影响。

JQuery UI在项目列表末尾可排序的不规则丢弃行为

1 个答案: