如何使用jQuery UI实现跨ifream拖拽并排序

sxn_web 2017-12-19 04:31:44

我用jQuery UI想做一个跨ifream的页面设计器，但是现在实现了从外部将元素拖入到ifream里，也可以拖拽结束后ifream里元素进行拖拽排序。却无法在拖入时选择放置的位置。求大神解决。或者有更好的拖拽方法的写法，帮忙优化一下。自己写的小demo感觉控制的不好。

外部页面index.html如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js" type="text/javascript"></script>  

		<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>  

	</head>

	<style>

		.span{

			cursor: pointer;

			background-color: #777;

		}

	</style>

	<body>

		<iframe id="frame" src="frame1.html" width="50%" height="500px"></iframe>

		<div class="drag">

				<div >

					<button>按钮</button> 

					<span class="span">拖拽</span>

				</div>

		</div>

		<script type="text/javascript">

				let i=0;

			    let el;

				$('.drag').draggable({

					connectToSortable: "#frame",

					addClasses:false,

					opacity: 0.5,      //半透明

					helper: "clone",   //克隆元素

					handle: "span",    //指定元素拖拽

					iframeFix: true, 

					start: function(e,ui){   //拖拽开始函数

						el=ui.helper[0];

					}

			    });

			    $('#frame').droppable({

			    	drop:function(e,ui){

			    		i++;

						$('#frame')[0].contentWindow.say(el);

			    	}

			    })

		</script>

	</body>

</html>

页面内嵌入的ifream.html如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js" type="text/javascript"></script>  

		<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>  

		<style type="text/css">

			/*#tab{

				display: flex;

			}*/

			.item{

				/*flex: 1;*/

				padding: 10px;

				border: 1px solid #eee;

			}

		</style>

	</head>

	<body>

		<div id="tab" class="sortable"></div>



		<script type="text/javascript">

			function say(self,i){

				$(self).children().addClass('item').attr('id',i).children();

				/*排序*/

				$('.sortable').sortable({  

					revert: true, //拖拽的流畅动画

				  }

				);

				$('#tab').append($(self).children());

			}

		</script>

	</body>

</html>