JQuery+drag. js Upload pictures and drag pictures
- 2021-09-20 19:28:33
- OfStack
The id attribute of the outer container should be 'container'
There are multiple queues in the container, which can be dragged at will, and the class attribute should be 'queue'
There are multiple drag blocks in the queue, and the class attribute should be 'dragger'
Dragging a drag block to the blank space at the end of the queue causes the drag block to be added to the end of the queue
1. html section:
<tr>
<td><span class="colorred">* </span> Product display picture: </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 section:
<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>
// Build a function to preview the uploaded picture and receive the passed 2 Variable parameter
function handleFiles(file, obj) {
var val=file[0].name
if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(val)) {
layer.msg(' Picture type must be .gif,jpeg,jpg,png,bmp In 1 Species ', {icon: 0,time: 2000, title: ' Prompt '});
return false;
}
// Gets the of all siblings of the currently clicked element html Content
var con = obj.innerHTML;
// Determine whether the current clicked element already exists img Picture elements, if there are, clear them all before adding them, if not, add them directly
if (con.indexOf("img") > 0) {
var pic = obj.getElementsByTagName("img");
for (var i = 0; i < pic.length; i++) {
obj.removeChild(pic[i]);
}
// Call add img Function of picture
creatImg();
} else {
creatImg();
}
function creatImg() {
// Create 1 A img Element
var img = document.createElement("img");
// Create 1 Delete img
var del =document.createElement("span")
// Settings img The source file path of the element, window.URL.createObjectURL() Method is created based on the parameters passed in 1 Object pointing to the parameter object URL. This URL Life only exists in the document in which it was created
img.src = window.URL.createObjectURL(file[0]);
//window.URL.revokeObjectURL() Release 1 A pass URL.createObjectURL() Objects created URL After the picture is displayed, we don't need to use this again URL So you must release it after loading
img.onload = function () {
window.URL.revokeObjectURL(this.src);
}
// In the currently clicked input Element to add the img Picture element
obj.appendChild(img);
obj.appendChild(del);
}
// Delete a picture
$(".shop_imgs li span").bind("click",function(){
$(this).siblings("input[type='file']").val('')
$(this).siblings('img').remove()
$(this).remove()
});
}
// Drag-and-drop is forbidden for pictures
$('.shop_imgs li').on('mousedown',function (e) {
e.preventDefault()css section:
.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 is to call:
(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;
}
// Copy the style of the moving picture
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' };
}
}