欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

拖动图片交换位置

程序员文章站 2022-07-14 16:21:12
...

代码示例

<!-- 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 );
相关标签: 拖动 图片交换