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 24 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 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
图象函数中的中文显示
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php统计文章排行示例
2014/03/04 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP实现八皇后算法
2019/05/06 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python 正则表达式操作指南
2009/05/04 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python mysql断开重连的实现方法
2019/07/26 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
采购主管的岗位职责
2013/12/17 职场文书
入党申请自荐书范文
2014/02/11 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python