JQuery+drag.js上传图片并且实现图片拖曳


Posted in jQuery onNovember 18, 2020

外层的容器的id属性应为'container'

容器中有多个队列,这些队列之间可以随意拖动,class属性应为'queue'

队列中有多个拖动块,class属性应为'dragger'

把拖动块拖到队列的尾部空白处会使这个拖动块加到队列尾部

1.html部分:

<tr>
              <td><span class="colorred">* </span>商品展示图片:</td>
              <td style="padding:20px 20px 20px 0">
                <div id="container11" style="padding:20px 0; border: 1px #ededed solid;">
                  <ul class="shop_imgs queue" style="width: 746px;  height: 100px;">
                    <li class="dragger" data-id="1">
                      <input type="file" name="files[]" class="qy_yyzz1 f" onchange="handleFiles(this.files,this.parentNode)">
                    </li>
                    <li class="dragger" data-id="2"> <input type="file" name="files[]" class="qy_yyzz2 f" onchange="handleFiles(this.files,this.parentNode)">
                    </li>
                    <li class="dragger" data-id="3"> <input type="file" name="files[]" class="qy_yyzz3 f" onchange="handleFiles(this.files,this.parentNode)">
                      </li>
                    <li class="dragger" data-id="4"> <input type="file" name="files[]" class="qy_yyzz4 f" onchange="handleFiles(this.files,this.parentNode)">
                     </li>
                    <li class="dragger" data-id="5"> <input type="file" name="files[]" class="qy_yyzz5 f" onchange="handleFiles(this.files,this.parentNode)">
                      </li>

                  </ul>
                 
                </div>  
              </td>
            </tr>

js部分:

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/drag/drag.js"></script>
<script type="text/javascript" src="/drag/main.js"></script>
 //构建预览上传图片的函数,并接收传递过来的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) 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) 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 < draggers[i].length; j++) { draggers[i][j].on('mousedown', dragStart); }
  $(document).on('mousemove', dragMove); $(document).on('mouseup', dragEnd);
}
var dragStart = function (e) { e.stopPropagation(); isMouseDown = true; mouseX = e.clientX; mouseY = e.clientY; dragger = $(this); }
var dragMove = function (e) { e.stopPropagation(); if (!isMouseDown) return; var dx = e.clientX - mouseX; var dy = e.clientY - mouseY; if (isDragging) { clone.css({ left: draggerLeft + dx, top: draggerTop + dy }); arrangeDragger(); } else if (Math.abs(dx) > 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');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 < queueArr.length; i++) { var queueTop = queueArr[i].offset().top; var queueHeight = queueArr[i].height(); var val = Math.min(queueTop + queueHeight, cloneTop + cloneHeight) - Math.max(queueTop, cloneTop); if (val > 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 <= cloneHeight * cloneWidth / 3)
        continue; if (draggers[queueIn][i][0] == dragger[0]) { isOwn = true; continue; }
      if (s > mx) { mx = s; pos = draggers[queueIn][i]; }
    }
  if (mx < 0) {
    if (isOwn) return null; if (draggers[queueIn].length == 0) { return { 'hover': null }; } else {
      var last, index = draggers[queueIn].length - 1; while (index >= 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 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JS验证码实现代码
2017/09/14 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
C#基础面试题
2016/10/17 面试题
个人求职信范文分享
2013/12/13 职场文书
护理工作感言
2014/01/16 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
新兵入伍决心书
2015/09/22 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
创业计划书之花店
2019/09/20 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL