拖動圖片交換位置

代碼示例

<!-- html代碼 -->
 <div class="show_content">
    <div class="img_content_one">
        <img src="圖片路徑" alt="">
        <span class="del_btn">刪除</span>
   </div>	
   <div class="img_content_one">
        <img src="圖片路徑" alt="">
        <span class="del_btn">刪除</span>
   </div>
</div>


<!-- js代碼示例 -->
//導入核心js
<script src="/js/td_sort.js"></script>
//使用方法
$('.show_content').DDSort({//要拖動的區域
	target: '.img_content_one',	//要拖動的元素	
	floatStyle: {
		'background-color': '#fff'
	},
	up: function(){
		var arr = new Array();
		$('.show_content .img_content_one').each(function(i){
			arr.push($(this).attr('src'));
		});
		console.log(arr);
	}			
});

核心代碼展示(td_sort.js)

;(function( $ ){
	/**
	 * Author: https://github.com/Barrior
	 * 
	 * DDSort: drag and drop sorting.
	 * @param {Object} options
	 *        target[string]: 		可選，jQuery事件委託選擇器字符串，默認'li'
	 *        cloneStyle[object]: 	可選，設置佔位符元素的樣式
	 *        floatStyle[object]: 	可選，設置拖動元素的樣式
	 *        down[function]: 		可選，鼠標按下時執行的函數
	 *        move[function]: 		可選，鼠標移動時執行的函數
	 *        up[function]: 		可選，鼠標擡起時執行的函數
	 */
	$.fn.DDSort = function( options ){
		var $doc = $( document ),
			fnEmpty = function(){},

			settings = $.extend( true, {

				down: fnEmpty,
				move: fnEmpty,
				up: fnEmpty,

				target: 'li',
				cloneStyle: {
					'background-color': '#eee'
				},
				floatStyle: {
					//用固定定位可以防止定位父級不是Body的情況的兼容處理，表示不兼容IE6，無妨
					'position': 'fixed',
					'box-shadow': '10px 10px 20px 0 #eee',
					'webkitTransform': 'rotate(0deg)',
					'mozTransform': 'rotate(0deg)',
					'msTransform': 'rotate(0deg)',
					'transform': 'rotate(0deg)'
				}

			}, options );

		return this.each(function(){

			var that = $( this ),
				height = 'height',
				width = 'width';

			if( that.css( 'box-sizing' ) == 'border-box' ){
				height = 'outerHeight';
				width = 'outerWidth';
			}

			that.on( 'mousedown.DDSort', settings.target, function( e ){
				//只允許鼠標左鍵拖動
				if( e.which != 1 ){
					return;
				}
				
				//防止表單元素失效
				var tagName = e.target.tagName.toLowerCase();
				//console.log(tagName);
				if( tagName == 'input' || tagName == 'textarea' || tagName == 'select' || tagName == 'a' || tagName == 'span' || tagName == 'dt' ){
					return;
				}
				
				var THIS = this,
					$this = $( THIS ),
					offset = $this.offset(),
					disX = e.pageX - offset.left,
					disY = e.pageY - offset.top,
				
					clone = $this.clone()
						.css( settings.cloneStyle )
						.css( 'height', $this[ height ]() )
						.empty(),
						
					hasClone = 1,

					//緩存計算
					thisOuterHeight = $this.outerHeight(),
					thatOuterHeight = that.outerHeight(),

					//滾動速度
					upSpeed = thisOuterHeight,
					downSpeed = thisOuterHeight,
					maxSpeed = thisOuterHeight * 3;
				
				settings.down.call( THIS );
				
				$doc.on( 'mousemove.DDSort', function( e ){
					if( hasClone ){
						$this.before( clone )
							.css( 'width', $this[ width ]() )
							.css( settings.floatStyle )
							.appendTo( $this.parent() );
							
						hasClone = 0;
					}
					
					var left = e.pageX - disX,
						top = e.pageY - disY,
						
						prev = clone.prev(),
						next = clone.next().not( $this );
					
					$this.css({
						left: left,
						top: top
					});
					
					//向上排序
					if( prev.length && top < prev.offset().top + prev.outerHeight()/2 ){
							
						clone.after( prev );
						
					//向下排序
					}else if( next.length && top + thisOuterHeight > next.offset().top + next.outerHeight()/2 ){
						
						clone.before( next );

					}

					/**
					 * 處理滾動條
					 * that是帶着滾動條的元素，這裏默認以爲that元素是這樣的元素（正常情況就是這樣），如果使用者事件委託的元素不是這樣的元素，那麼需要提供接口出來
					 */
					var thatScrollTop = that.scrollTop(),
						thatOffsetTop = that.offset().top,
						scrollVal;
					
					//向上滾動
					if( top < thatOffsetTop ){

						downSpeed = thisOuterHeight;
						upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
						scrollVal = thatScrollTop - upSpeed;

					//向下滾動
					}else if( top + thisOuterHeight - thatOffsetTop > thatOuterHeight ){

						upSpeed = thisOuterHeight;
						downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
						scrollVal = thatScrollTop + downSpeed;
					}

					that.scrollTop( scrollVal );

					settings.move.call( THIS );

				})
				.on( 'mouseup.DDSort', function(){
					
					$doc.off( 'mousemove.DDSort mouseup.DDSort' );
					
					//click的時候也會觸發mouseup事件，加上判斷阻止這種情況
					if( !hasClone ){
						clone.before( $this.removeAttr( 'style' ) ).remove();
						settings.up.call( THIS );
					}
				});
				
				return false;
			});
		});
	};

})( jQuery );