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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现动态向上滚动
Dec 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
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Python学习资料
2007/02/08 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python实现最速下降法
2020/03/24 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
费城故事观后感
2015/06/10 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技