<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drag append</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
.inner {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
border: 1px solid blue;
z-index: 2;
}
.container {
position: absolute;
top: 200px;
left: 1000px;
width: 400px;
height: 400px;
border: 1px solid purple;
}
</style>
</head>
<body>
<div class="inner"></div>
<div class="container"></div>
<script type="text/javascript">
(function ($) {
$(document).on('mousedown', '.inner', function (e) {
var positionDiv = $(this).offset();
var scrollTop = $(window).scrollTop();
//点击时处于内框位置
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top + scrollTop;
$(document).on('mousemove', '.inner', function (e) {
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - $('.inner').outerWidth(true)) {
x = $(document).width() - $('.inner').outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > document.documentElement.clientHeight - $('.inner').outerHeight(true)) {
y = document.documentElement.clientHeight - $('.inner').outerHeight(true);
}
$('.inner').css({
'left': x + 'px',
'top': y + 'px'
});
});
$(document).on('mouseup', function (e) {
$(document).off('mousemove');
var pointEles = $(document.elementsFromPoint(e.pageX, e.pageY)),
inner = $('.inner');
if ([...pointEles].find(function (item) {
return $(item).hasClass('container');
})) {
$(document).off('mousedown')
inner.remove();
$('.container').append(inner.css({
top: '100px',
left: '100px'
}));
}
});
});
})(jQuery);
</script>
</body>
</html>
网友评论