元素拖动插件 爱被打了一巴掌 2022-04-11 10:09 157阅读 0赞 插件:[https://www.html5tricks.com/jquery-drag-element.html][https_www.html5tricks.com_jquery-drag-element.html] 默认拖动元素初始化位置是随机的,我额外加了两个参数bottomRight 和 topLeft 进行定位。 (1)插件代码: $.fn.extend({ //---元素拖动插件 dragging:function(data){ var $this = $(this); var xPage; var yPage; var X;// var Y;// var xRand = 0;// var yRand = 0;// var father = $this.parent(); var defaults = { move : 'both', randomPosition : true , hander:1 } var opt = $.extend({ },defaults,data); var movePosition = opt.move; var random = opt.randomPosition; var hander = opt.hander; if(hander == 1){ hander = $this; }else{ hander = $this.find(opt.hander); } //---初始化 father.css({ "position":"relative","overflow":"hidden"}); $this.css({ "position":"absolute"}); hander.css({ "cursor":"move"}); var faWidth = father.width(); var faHeight = father.height(); var thisWidth = $this.width()+parseInt($this.css('padding-left'))+parseInt($this.css('padding-right')); var thisHeight = $this.height()+parseInt($this.css('padding-top'))+parseInt($this.css('padding-bottom')); var mDown = false;// var positionX; var positionY; var moveX ; var moveY ; if(random){ $thisRandom(); }else{ if(!!opt.bottomRight){ $this.each(function(index){ var bottomRight = opt.bottomRight.split(","); $(this).css({ bottom: bottomRight[0], right: bottomRight[1], }); return false; }); } if(!!opt.topLeft){ $this.each(function(index){ var topLeft = opt.topLeft.split(","); $(this).css({ top: topLeft[0], left: topLeft[1], }); return false; }); } } function $thisRandom(){ //随机函数 $this.each(function(index){ var randY = parseInt(Math.random()*(faHeight-thisHeight));/// var randX = parseInt(Math.random()*(faWidth-thisWidth));/// if(movePosition.toLowerCase() == 'x'){ $(this).css({ left:randX }); }else if(movePosition.toLowerCase() == 'y'){ $(this).css({ top:randY }); }else if(movePosition.toLowerCase() == 'both'){ $(this).css({ top:randY, left:randX }); } }); } hander.mousedown(function(e){ father.children().css({ "zIndex":"0"}); $this.css({ "zIndex":"1"}); mDown = true; X = e.pageX; Y = e.pageY; positionX = $this.position().left; positionY = $this.position().top; return false; }); $(document).mouseup(function(e){ mDown = false; }); $(document).mousemove(function(e){ xPage = e.pageX;//-- moveX = positionX+xPage-X; yPage = e.pageY;//-- moveY = positionY+yPage-Y; function thisXMove(){ //x轴移动 if(mDown == true){ $this.css({ "left":moveX}); }else{ return; } if(moveX < 0){ $this.css({ "left":"0"}); } if(moveX > (faWidth-thisWidth)){ $this.css({ "left":faWidth-thisWidth}); } return moveX; } function thisYMove(){ //y轴移动 if(mDown == true){ $this.css({ "top":moveY}); }else{ return; } if(moveY < 0){ $this.css({ "top":"0"}); } if(moveY > (faHeight-thisHeight)){ $this.css({ "top":faHeight-thisHeight}); } return moveY; } function thisAllMove(){ //全部移动 if(mDown == true){ $this.css({ "left":moveX,"top":moveY,bottom:'auto',right:'auto'}); }else{ return; } if(moveX < 0){ $this.css({ "left":"0"}); } if(moveX > (faWidth-thisWidth)){ $this.css({ "left":faWidth-thisWidth}); } if(moveY < 0){ $this.css({ "top":"0"}); } if(moveY > (faHeight-thisHeight)){ $this.css({ "top":faHeight-thisHeight}); } } if(movePosition.toLowerCase() == "x"){ thisXMove(); }else if(movePosition.toLowerCase() == "y"){ thisYMove(); }else if(movePosition.toLowerCase() == 'both'){ thisAllMove(); } }); } }); (2)使用方法: /* .search-card: 要拖动的区域 */ $('.search-card').each(function(){ $(this).dragging({ move : 'both', //可上下左右移动 randomPosition:false,//不随机定位 hander:'#search-card-move', //可点击拖动的区域 bottomRight:"1rem,1rem" //位置定位 }); }); [https_www.html5tricks.com_jquery-drag-element.html]: https://www.html5tricks.com/jquery-drag-element.html
还没有评论,来说两句吧...