<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size:13px;
}
ul {
list-style: none;
}
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #fff;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width:560px;
height: 480px;
z-index: 1010;
visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
z-index:1000;
background-color: #fff;
border-radius: 8px;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 999;
opacity: 0;
background: rgba(1,1,1,0.6);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-show .md-overlay {
opacity: 1;
visibility: visible;
}
.md-show .md-modal {
opacity: 1;
visibility: visible;
}
.modal-header{
margin:auto;
text-align: center;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
.modal-body{
padding:20px;
}
.modal-content{
background: #fff;
display: flex;
justify-content: center;
max-height:320px;
overflow-y: auto;
padding-top:20px;
border-radius: 5px;
}
.modal-btn{
display: inline-block;
width: 90px;
height: 32px;
background: #FF7A00;
border-radius: 4px;
color:#fff;
line-height: 32px;
text-align: center;
margin-right:15px;
cursor: pointer;
}
.modal-btn-confirm{
background: #FF7A00;
margin-right:15px;
}
.modal-btn-cancel{
background: #BBBABA;
}
.modal-drags{
width:520px;
height:300px;
box-sizing: border-box;
overflow-y: auto;
margin:30px auto;
background-color: #fff;
}
#drag{
}
#drag ul {
display: block;
position: relative;
width:500px;
height:auto;
}
.clearfix::before{
content: "";
display: block;
clear: both;
}
#drag ul li {
width: 100px;
height: 100px;
float: left;
border: 1px solid transparent;
box-sizing: border-box;
position: relative;
}
#drag ul li img {
width: 100px;
height: 100px;
}
#drag ul li span{
position: absolute;
top:-6px;
right:0;
background:mediumslateblue;
color:red;
display: inline-block;
width:20px;
height:20px;
line-height: 16px;
text-align: center;
cursor: pointer;
z-index:10;
display: none;
}
.confrim-btn{
border-radius:4px;
background-color: coral;
color:#fff;
display: inline-block;
padding:5px 20px;
border:0;
font-size: 12px;
cursor: pointer;
}
@media only screen and (max-width: 750px) {
#drag ul {
width: 100%;
}
.modal-body{
padding:4px;
}
.md-show .md-modal{
width: 96% !important;
}
.modal-drags{
width:320px;
margin:30px auto;
}
#drag ul li {
width: 100px;
height: 100px;
float: left;
border: 1px solid transparent;
}
#drag ul li img {
width: 100px;
height: 100px;
}
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/Sortable.min.js"></script>
</head>
<body>
<div class="drag-modal-dialog">
<div class="md-modal">
<div class="modal-body">
<div class="modal-header">You can move the jump order ?</div>
<div class="modal-drags">
<div id="drag">
<ul class="img-items clearfix" id="example1">
</ul>
</div>
</div>
<div class="modal-content">
<span id="getPos" class="modal-btn modal-btn-confirm">Confirm</span>
<span class="modal-btn modal-btn-cancel">Cancel</span>
</div>
</div>
</div>
</div>
<div class="md-overlay"></div>
<input type="file" id="input" name="input" onchange="previewFile()" multiple="multiple" accept="image/*" />
<script type="text/javascript">
var files=[]
function previewFile(){
files=[];
files = document.getElementById("input").files;
if(files.length>30){
alert("最多允许上传30张");
return false;
}
$("body").addClass("md-perspective md-show");
document.querySelector('ul.img-items').innerHTML="";
for(let i=0; i< files.length; i++){
const image = document.createElement('img')
if (files[i]) {
let reader = new FileReader();
reader.onload = function () {
image.src = reader.result;
}
let url= reader.readAsDataURL(files[i]);
const li = document.createElement('li')
li.setAttribute("data-src",files[i].name);
li.setAttribute("data-lastmodified",files[i].lastModified);
li.setAttribute("data-size",files[i].size);
li.className='img-item'
li.appendChild(image)
const span = document.createElement('span')
span.innerHTML="x"
li.appendChild(span)
document.querySelector('ul').appendChild(li)
}
}
console.log(files)
setTimeout(init(),500)
}
function init(){
var example1=$("#example1").get(0);
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
}
document.getElementById("getPos").onclick=function(){
var result=[]
var liList=document.getElementsByClassName("img-item");
var rowSize=5
if (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPhone/i)
){
rowSize=3
}
var result=liList
console.log(result)
console.log(files)
let tempFiles=[]
for(let i=0;i<result.length;i++){
for(let j=0;j<files.length;j++){
if(result[i].dataset.lastmodified==files[j].lastModified && result[i].dataset.src==files[j].name && result[i].dataset.size==files[j].size){
tempFiles.push(files[j])
}
}
}
console.log(tempFiles)
var formData = new FormData();
formData.append("token_csrf", 'xmyfsj');
tempFiles.forEach((item)=>{
formData.append("file[]", item);
})
$.ajax({
url: "/v1/uploadFile",
method: "POST",
data: formData,
async: false,//同步上传
cache: false,//上传文件无需缓存
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function (result) {
console.info(result);
},
error: function (result){
console.info("失败");
}
});
}
$(function(){
$(".modal-btn").click(function(){
//数据获取，发送请求
$("#input").val("");
$("body").removeClass("md-perspective md-show");
})
//解决sortable.js拖拽打开新页面，加入这段代码，阻止事件冒泡
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
});
</script>
</body>
</html>
