这篇文章主要介绍了JQuery+drag.js上传图片并且实现图片拖曳,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
外层的容器的id属性应为'container'
容器中有多个队列，这些队列之间可以随意拖动，class属性应为'queue'
队列中有多个拖动块，class属性应为'dragger'
把拖动块拖到队列的尾部空白处会使这个拖动块加到队列尾部
1.html部分：
* 商品展示图片：
js部分:
//构建预览上传图片的函数，并接收传递过来的2个变量参数 function handleFiles(file, obj) { var val=file[0].name if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(val)) { layer.msg('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种', {icon: 0,time: 2000, title: '提示'}); return false; } //获取当前点击的元素的所有同级元素的html内容 var con = obj.innerHTML; //判断当前点击元素内是否已经存在img图片元素，如果有则先全部清除后再添加，如果没有就直接添加 if (con.indexOf("img") > 0) { var pic = obj.getElementsByTagName("img"); for (var i = 0; i <pic.length; i++) { obj.removeChild(pic[i]); } //调用添加img图片的函数 creatImg(); } else { creatImg(); } function creatImg() { //创建一个img元素 var img = document.createElement("img"); // 创建一个删除img var del =document.createElement("span") //设置img元素的源文件路径，window.URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里 img.src = window.URL.createObjectURL(file[0]); //window.URL.revokeObjectURL() 释放一个通过URL.createObjectURL()创建的对象URL，在图片被显示出来后，我们就不再需要再次使用这个URL了，因此必须要在加载后释放它 img.onload = function () { window.URL.revokeObjectURL(this.src); } //在当前点击的input元素后添加刚刚创建的img图片元素 obj.appendChild(img); obj.appendChild(del); } // 删除图片 $(".shop_imgs li span").bind("click",function(){ $(this).siblings("input[type='file']").val('') $(this).siblings('img').remove() $(this).remove() }); } // 图片禁止拖拽 $('.shop_imgs li').on('mousedown',function (e) { e.preventDefault()
css部分:
.div1-table tr { width: 100%; height: 68px; line-height: 68px; border-bottom: 1px solid #eaeaea; } .div1-table tr td:first-child { padding-left: 30px; width: 16%; } .shop_imgs { display: flex; justify-content: space-around; margin: 20px 0; } .shop_imgs li { position: relative; width: 100px; height: 100px; background: url(../../images/user/shell/plus_sp_img.jpg-600) no-repeat center; text-align: center; cursor: move; list-style: none; } .shop_imgs input[type="file"] { position: absolute; left: 0; bottom: 0; /* z-index: 3; */ display: inline-block; width: 100%; height: 100%; cursor: pointer; border: none; opacity: 0; padding-left: 10px; } .shop_imgs li span { position: absolute; right: 6px; top: 7px; width: 23px; height: 23px; background: url(../../images/close.png-600) no-repeat center; background-size: 100%; cursor: pointer; } .shop_imgs li img { position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; }
main.js:
// main.js里面的内容是调用:
(function(){registerDrag($('#container11'));})();
drag.js:
var queueArr = []; var draggers = []; var isDragging = false; var isMouseDown = false; var dragger = null; var mouseX; var mouseY; var draggerLeft; var draggerTop; var clone = null; var DRAG_THRESHOLD = 5; var queueContainer; var queueActive = { }; var queueUnActive = { }; var registerDrag = function (container) { queueContainer = container; $.each(container.find('.queue'), function (index, value) { queueArr[index] = $(value); draggers[index] = []; elements = $(value).find('.dragger'); $.each(elements, function (_index, _value) { draggers[index][_index] = $(_value); }); }); for (var i = 0; i <draggers.length; i++) for (var j = 0; j DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD) { clone = makeClone(dragger); draggerLeft = dragger.offset().left - parseInt(dragger.css('margin-left')) - parseInt(dragger.css('padding-left')); draggerTop = dragger.offset().top - parseInt(dragger.css('margin-top')) - parseInt(dragger.css('padding-top')); clone.css({ left: draggerLeft, top: draggerTop }); queueContainer.append(clone); dragger.css('visibility', 'hidden'); isDragging = true; } } var dragEnd = function (e) { e.stopPropagation(); if (isDragging) { isDragging = false; clone.remove(); dragger.css('visibility', 'visible'); } for (var i = 0; i <queueArr.length; i++) queueArr[i].css(queueUnActive); isMouseDown = false; } // 复制出来移动的图片的样式 var makeClone = function (source) { var res = source.clone(); res.addClass('cloneimg');res.children('img').attr('src','/static/index/images/user/shell/tuozhuai.png-600');res.css({ position: 'absolute', 'z-index': 100000 }); return res; } var arrangeDragger = function () { for (var i = 0; i <queueArr.length; i++) queueArr[i].css(queueUnActive); var queueIn = findQueue(); if (queueIn != -1) queueArr[queueIn].css(queueActive); var hover = findHover(queueIn); if (hover == null) return; var _hover = hover.hover; var _insert = hover.insert; var queueIdOriginal, drggerIdOriginal; var queueIdHover, drggerIdHover; for (var i = 0; i <draggers.length; i++) for (var j = 0; j <draggers[i].length; j++) { if (draggers[i][j][0] == dragger[0]) { queueIdOriginal = i; drggerIdOriginal = j; } } draggers[queueIdOriginal].splice(drggerIdOriginal, 1); if (_hover) { for (var i = 0; i <draggers.length; i++) for (var j = 0; j <draggers[i].length; j++) { if (_hover && draggers[i][j][0] == _hover[0]) { queueIdHover = i; drggerIdHover = j; } } if (_insert == 'left') { _hover.before(dragger); draggers[queueIdHover].splice(drggerIdHover, 0, dragger); } else { _hover.after(dragger); draggers[queueIdHover].splice(drggerIdHover + 1, 0, dragger); } } else { draggers[queueIn].push(dragger); queueArr[queueIn].append(dragger); } // console.log('******************'); for (var i = 0; i <draggers.length; i++) // for (var j = 0; j <draggers[i].length; j++) // console.log(draggers[i][j][0]); console.log('******************'); } var findQueue = function () { var mx = -1, pos = -1; var cloneTop = clone.offset().top; var cloneHeight = clone.height(); for (var i = 0; i mx) { mx = val; pos = i; } } return pos; } var findHover = function (queueIn) { if (queueIn == -1) return null; var mx = -1, pos = null; var cloneTop = clone.offset().top; var cloneHeight = clone.height(); var cloneLeft = clone.offset().left; var cloneWidth = clone.width(); var isOwn = false; for (var i = 0; i <draggers[queueIn].length; i++) { var _draggerTop = draggers[queueIn][i].offset().top; var _draggerHeight = draggers[queueIn][i].height(); var vertical = Math.min(_draggerTop + _draggerHeight, cloneTop + cloneHeight) - Math.max(_draggerTop, cloneTop); var _draggerLeft = draggers[queueIn][i].offset().left; var _draggerWidth = draggers[queueIn][i].width(); var horizontal = Math.min(_draggerLeft + _draggerWidth, cloneLeft + cloneWidth) - Math.max(_draggerLeft, cloneLeft); if (vertical <= 0 || horizontal <= 0) continue; var s = vertical * horizontal; if (s mx) { mx = s; pos = draggers[queueIn][i]; } } if (mx = 0 && draggers[queueIn][index][0] == dragger[0]) index--; if (index >= 0) last = draggers[queueIn][index]; else return { 'hover': null }; if (cloneLeft >= last.offset().left + last.width()) return { 'hover': last, 'insert': 'right' }; else return null; } } else { var posMid = (2 * pos.offset().left + pos.width()) / 2; var cloneMid = (2 * clone.offset().left + clone.width()) / 2; if (posMid > cloneMid) return { 'hover': pos, 'insert': 'left' }; else return { 'hover': pos, 'insert': 'right' }; } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是JQuery+drag.js上传图片并且实现图片拖曳的详细内容，更多请关注本站其它相关文章！
