<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
/* margin-top: 10px; */
/* margin-left: 10px; */
/* position: absolute; */
/* position: relative; */
}
.canmove{
cursor: move;
}
#lajiwu{
background-color: rgba(0,0,0,.3);
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 300px;
text-align: center;
border: 1px solid transparent;
z-index: -1;
}
.laji_tips{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.isactive{
background-color: rgba(0,0,0,.1) !important;
border: 1px solid red;
}
#lajilist{
text-align: left;
margin-top: 10px;
padding: 10px;
}
#lajilist span{
display: inline-block;
width: 50px;
height: 50px;
background-color: #ccc;
margin: 3px;
vertical-align: bottom;
}
.hide{
display: none;
}
</style>
</head>
<body>
<p>当前位置: <span id="sitex">x:0</span> <span id="sitey">y:0</span></p>
<div data-row="1" class="box boxit"></div>
<span class="boxit">可以移动</span>
<button id="btn">在创建一个</button>
<br>
<div id="lajiwu" class="">
<h2>回收垃圾</h2>
<div id="lajilist">
</div>
<div class="laji_tips hide">
<p>是否倒入垃圾箱</p>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var lajiwu = $('#lajiwu');
var domIndex = 0;
window.onload = function(){
$('#btn').on('click',function(){
let doms = `<div data-row=${domIndex + 1} class="box boxit"></div>`;
$(this).before(doms);
})
$(window).on('mousedown',function(e){
let curEle = $(e.target);
let iscanhandle = canhandle(curEle);
if(iscanhandle){
bindClick(e,curEle)
}
})
// 获取所有元素编号
if($('.boxit').length > 0){
domIndex = $('.boxit').length;
}
}
// 可操作元素激活
function bindClick(e,ele){
ele.addClass('canmove')
Dommove(e,ele);
$(document).on('mouseup',function(){
stopListenMove();
})
ele.on('mouseup',function(){
$(this).removeClass('canmove');
stopListenMove();
// 扔进垃圾桶
throwLitter($(this));
})
}
// 判断用户是否要扔进垃圾桶
function throwLitter(e){
if(lajiwu.hasClass('isactive')){
let curRowIndex = ''
if(e.data('row')){
curRowIndex = e.data('row')
}
let LitterDom = `<span ${curRowIndex?'data-row ="' + curRowIndex + '"':''}>${curRowIndex}</span>`
$('#lajilist').append(LitterDom);
e.remove();
lajiwu.removeClass('isactive');
lajiwu.find('.laji_tips').addClass('hide');
}
}
// 停止监听document的鼠标移动
function stopListenMove(){
$(document).off("mousemove");
}
// 控制当前元素移动
function Dommove(e,ele){
// 获取当前元素大小
let eleW = ele[0].offsetWidth;
let eleH = ele[0].offsetHeight;
let eleL = ele.offset().left;
let eleT = ele.offset().top;
// let curMousesite = ele.offset().left;
let curMousesiteX = e.clientX;
let curMousesiteY = e.clientY;
let winClientW = $(window).width();
let winClientH = $(window).height();
$(document).on('mousemove',function(e){
let curX = e.pageX;
let curY = e.pageY;
$('#sitex').text('x:' + curX);
$('#sitey').text('y:' + curY);
let moveX = curX - (curMousesiteX - eleL);
let moveY = curY - (curMousesiteY - eleT);
// 获取鼠标点击的左侧dom
if(moveX <= 0) moveX = 0;
if(moveY <= 0) moveY = 0; // 935
if(moveX >= winClientW - eleW) moveX = winClientW - eleW;
if(moveY >= winClientH - eleH) moveY = winClientH - eleH;
// 垃圾回收
if(moveX + (eleW / 2) >= lajiwu.offset().left){
lajiwu.addClass('isactive');
lajiwu.find('.laji_tips').removeClass('hide');
}
else{
lajiwu.removeClass('isactive');
lajiwu.find('.laji_tips').addClass('hide');
}
ele.offset({left : moveX,top : moveY})
})
}
// 判断是否是可操作性dom
function canhandle(ele){
if(ele.hasClass('boxit')){
return true;
}
else{
return false;
}
}
</script>
简单的一个拖动小例子, 直接复制即可