JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div style="width:100%;overflow:hidden;">
	<h2>可以移动到列表项</h2>
	<ul class="connected list">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
		<li>Item 6</li>
	</ul>
	<ul class="connected list no2">
		<li class="highlight">Item 1</li>
		<li class="highlight">Item 2</li>
		<li class="highlight">Item 3</li>
		<li class="highlight">Item 4</li>
		<li class="highlight">Item 5</li>
		<li class="highlight">Item 6</li>
	</ul>
	</div>
	<div style="width:1010px;margin:0 auto;border:1px solid #ccc;overflow:hidden;">	
		<h1>常见的图片可以拖移效果</h1>
		<ul class="demoList">
			<li>
				<a href="#">
					<img src="http://m1.img.srcdd.com/farm5/d/2014/0726/18/7113DF520F35B15940639761A552E076_B500_900_240_270.jpeg.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m3.img.srcdd.com/farm5/d/2014/0726/18/C6555E535CA72F08983C3551C9BD267E_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m2.img.srcdd.com/farm4/d/2014/0726/18/2A229593B6BC277E886933DEDA1F7901_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m3.img.srcdd.com/farm4/d/2014/0726/18/612BA1921AE462D650646E27422E282E_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m3.img.srcdd.com/farm5/d/2014/0726/18/ECFCA65A8ED7B467D2AB47B1BB425904_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m2.img.srcdd.com/farm5/d/2014/0726/18/4F8C7313212894BBEBFBBB4DD3649721_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m3.img.srcdd.com/farm4/d/2014/0726/18/85A92D3FC356F41710CBB580D12C0661_B500_900_240_270.jpeg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="http://m3.img.srcdd.com/farm4/d/2014/0726/18/8955854BAAF4F84A55A47F711734FB91_B500_900_240_270.jpeg"/>
				</a>
			</li>
		</ul>
	</div>

CSS

h1, h2 {
			text-align: center;
			font-weight: normal;
		}
		.connected li, .sortable li{
			list-style: none;
			border: 1px solid #CCC;
			background: #F6F6F6;
			font-family: "Tahoma";
			color: #1C94C4;
			margin: 5px;
			padding: 5px;
			height: 22px;
		}
		li.highlight {
			background: #FEE25F;
		}
		.connected {
			float: left;
			width: 200px;
			
		}
		.connected.no2 {
			float: right;
		}
		li.sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
		}
	
		/* 图片css */
		img{border:none;}
		.demoList{width:100%;margin-top:12px;overflow:hidden;}
		ul,li{list-style:none;}
		*{margin:0;padding:0;}
		.demoList li {float:left;display:inline;margin:10px 0 0 10px;width:240px;height:270px;overflow:hidden;}
		.demoList li.sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
		}

JavaScript

/**
 * javascript拖放元素
 */ 

 function Sortable(cfg){
	
	this.cfg = $.extend({},defaults,cfg || {});
	this._init();
 };
 $.extend(Sortable.prototype,{
	// 函数初始化
	_init: function(){
		var self = this;
		var cfg = self.cfg;
		if(cfg.container == null) {return;}
		var placeholders = $(),
			dragging;

		// 该容器下的子元素
		$(cfg.container).each(function(index,curItem){
			var items = $(curItem).children();
			var placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">');
			placeholders = placeholders.add(placeholder);

			items.attr("draggable","true").on('dragstart',function(e){
				var dt = e.originalEvent.dataTransfer;
				dt.effectAllowed = 'move';
				index = (dragging = $(this)).index();
			}).on('dragend',function(e){
				dragging.fadeIn();
				placeholders.detach();
			}).not('a[href], img').on('selectstart', function() {   //禁止鼠标选中文字
				this.dragDrop && this.dragDrop();
				return false;
			}).end().add([this, placeholder]).on("dragover dragenter drop",function(e){
				if (e.type == 'drop') {
					e.stopPropagation();
					placeholders.filter(':visible').after(dragging);
					return false;
				}
				e.preventDefault();
				e.originalEvent.dataTransfer.dropEffect = 'move';
				if (items.is(this)) {
					dragging.hide();
					$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
					placeholders.not(placeholder).detach();
				}
				return false;
			});
		});
		
	}
 });

 var defaults = {
	container           :   null
 };
new Sortable({
			"container": '.connected'
		});

		new Sortable({
			"container": '.demoList'
		});