0.效果
1.使用
1-1.引用:jquery.js和插件文件dragHelper.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({
width: 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;
}
转载于:https://www.cnblogs.com/toly-top/p/9782012.html
相关资源：FlutterUnit：【Flutter集录指南应用】Flutter的统一，编码器的统一-源码
