1 最简单的拖拽移动
#moveDom{
width:100px;
height:100px;
background: #f00;
position: absolute;
}
<div id = "moveDom"></div>
<script>
var moveDom = document.getElementById("moveDom");
moveDom.onmousedown = function(el){
let {offsetX,offsetY} = el
document.onmousemove = function(e){
let x = e.clientX - offsetX + "px",
y = e.clientY - offsetY + "px";
moveDom.style.left = x
moveDom.style.top = y
moveDom.style.transition = 'all 0s'
}
}
moveDom.onmouseup = function(){
document.onmousemove = null
}
</script>
2 HTML5拖拽
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="./apple.jpg" draggable="true" ondragstart="drag(event)" width = "100px">
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
3 文件拖拽上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS文件拖拽上传</title>
<style>
div{
width: 300px;
height: 300px;
border:1px dashed #f00;
position:absolute;
top: 50%;
left: 50%;
margin:-150px 0 0 -150px;
text-align:center;
}
</style>
</head>
<body>
<meter id="m1" value="0" min="0" max="100"></meter>
<div id="box">请将文件拖拽到此区域</div>
<script>
window.onload = function () {
var oBox = document.getElementById('box');
var oM = document.getElementById('m1');
//进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
oBox.ondragenter = function(){
oBox.innerHTML = '请释放鼠标';
};
oBox.ondragover = function(){
return false;
};
oBox.ondragleave = function(){
oBox.innerHTML = '请将文件拖拽到此区域';
};
oBox.ondrop = function(ev){
var oFile = ev.dataTransfer.files[0];
var reader = new FileReader();
//读取成功
reader.onload = function(){
console.log(reader);
};
reader.onloadstart = function(){
alert('读取开始');
};
reader.onloadend = function(){
alert('读取结束');
};
reader.onabort = function(){
alert('中断');
};
reader.onerror = function(){
alert('读取失败');
};
reader.onprogress = function(ev){
var scale = ev.loaded/ev.total;
if(scale>=0.5){
alert(1);
reader.abort();
}
oM.value = scale*100;
};
reader.readAsDataURL(oFile,'base64');
return false;
};
};
</script>
</body>
</html>
4 拖拽自动排序
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
html, body{
width:100%;
height:100%;
}
.wrap{
position: relative;
width: 600px;
height: 600px;
margin: 100px auto;
border: solid 1px red;
}
.wrap div{
position:absolute;
z-index: 1;
width:100px;
height:100px;
background: red;
transition: all .5s;
}
</style>
</head>
<body>
<div class="wrap" id="elWrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script>
let index = 0;
let elArr = document.getElementById('elWrap').children;
let elList =[];
//构造一个数组
for(let i = 0;i < elArr.length;i++){
elList.push({el: elArr[i], sort: i, index: i});
elList[i].onclick = addEvent(elList[i]);
}
moveItem(elList);
function addEvent(item) {
item.el.addEventListener('mousedown',(e) => {
item.el.style.zIndex = 2;
item.el.style.transition = 'all 0s';
let startX = e.pageX,
startY = e.pageY,
left = item.el.offsetLeft,
top = item.el.offsetTop;
let moveFun = (e) => {
let X = e.pageX - startX + left;
let Y = e.pageY - startY + top;
item.el.style.left = `${X}px`;
item.el.style.top = `${Y}px`;
reRange(item, X, Y);
};
document.addEventListener('mousemove',moveFun);
item.el.addEventListener('mouseup',() => {
document.removeEventListener('mousemove',moveFun);
item.el.style.zIndex = 1;
item.el.style.transition = 'all .5s';
moveItem(elList);
});
});
}
function reRange(item, x, y) {
let moveIndex = Math.round(x / 125) + Math.round(y / 125) * 5;
moveIndex = moveIndex < 0 ? 0 : moveIndex;
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
if(moveIndex != index){
index = moveIndex;
let currentSort = item.sort;
for(let i = 0;i < elList.length;i++){
if(currentSort < moveIndex){
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
elList[i].sort -= 1;
};
}else if(currentSort > moveIndex){
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
elList[i].sort += 1;
};
}
};
elList[item.index].sort = moveIndex;
moveItem(elList);
}
}
//排列
function moveItem(elList) {
for(let i = 0;i < elList.length;i++){
elList[i].el.style.left = elList[i].sort % 5 * 125 + 'px';
elList[i].el.style.top = parseInt(elList[i].sort / 5) * 125 + 'px';
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号