0.效果
1.使用
1-1.引用:jquery.js和插件文件dragHelper.js
<!--jquery.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="plugs/toly-drag/dragHelper.js"></script>
1-2.使用:只要在要拖拽的元素上添加属性:toly-plug=”drag-helper”即可如:
<div class="dragHelper" toly-plug="drag-helper"></div>
[注]拖拽的元素必须是非static的定义方式
1-3.html的结构:body标签下
<img src="bg.jpg" toly-plug="drag-helper">
<img src="bg.jpg" toly-plug="drag-helper">
<img src="bg.jpg" toly-plug="drag-helper">
<div class="dragHelper" toly-plug="drag-helper">dragHelper</div>
1-4.html的css样式
.dragHelper {
width: 300px;
height: 300px;
background: aqua;
position: relative;
}
img {
width: 300px;
position: fixed ;
}
源码详见:
link:https://github.com/toly1994328/toly-drager.git
到这就能实现上面的效果了。额外说一下,一个可选配置
toly-center=”yes”可使指定元素一开始居中于可视窗口。
<img src="bg.jpg" toly-plug="drag-helper" toly-center="yes">
插件源码:dragHelper.js
var $target = $('[toly-plug="drag-helper"]');
isCenter();
function isCenter() {
var $center = $('[toly-center="yes"]');
if ( $center) {
autoCenter($center);
console.log("{}--{"+"}");
var timer = null;
$(window).resize(function () {
window.clearTimeout(timer);
timer = window.setTimeout(function () {
fillWindow($('body'))
autoCenter($center)
}, 50);
});
}
}
//自动居中
function autoCenter($el) {
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var elW = $el.innerWidth();
var elH = $el.innerHeight();
$el.css({
left: (innerWidth - elW) / 2,
top: (innerHeight - elH) / 2
})
}
function fillWindow($el) {
$el.css({
window.innerWidth,
height: window.innerHeight,
top: 0,
left: 0
})
}
var mX = 0, mY = 0, isDrag = false;
//鼠标按下
$target.on('mousedown', function (e) {
mX = e.pageX - $(e.target).offset().left;//鼠标按下点与元素最左边距离
mY = e.pageY - $(e.target).offset().top;//鼠标按下点与元素最右边距离
isDrag = true;
})
document.onmousemove = function (ev) {
var moveX = 0, moveY = 0;
if (isDrag) {
moveX = ev.pageX - mX;
moveY = ev.pageY - mY;
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var elW = $(ev.target).innerWidth();
var elH = $(ev.target).innerHeight();
var maxY = innerHeight - elH;
var maxX = innerWidth - elW;
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
$(ev.target).css({
left: moveX,
top: moveY
})
}
};
$('.link').click(function () {
$('#mask').show();
$target.show();
});
$('.toly-dialog-close').click(function () {
console.log("{}--{" + "}");
$target.fadeOut(100);
$('#mask').fadeOut(100);
})
//鼠标松开
document.onmouseup = function (ev) {
isDrag = false;
}