Fei_Xian_Lin_Ye_Fang_Huo/public/lib/drag.js

165 lines
4.7 KiB
JavaScript
Raw Permalink Normal View History

2023-08-18 08:55:52 +08:00
;(function($, window, document,undefined) {
//定义的构造函数
var Drag = function(ele, opt) {
this.$ele = ele,
this.x = 0,
this.y = 0,
this.defaults = {
parent:'parent',
randomPosition:true,
direction:'all',
handler:false,
dragStart:function(x,y){},
dragEnd:function(x,y){},
dragMove:function(x,y){}
},
this.options = $.extend({}, this.defaults, opt)
}
//定义方法
Drag.prototype = {
run: function() {
var $this = this;
var element = this.$ele;
var randomPosition = this.options.randomPosition; //位置
var direction = this.options.direction; //方向
var handler = this.options.handler;
var parent = this.options.parent;
var isDown = false; //记录鼠标是否按下
var fun = this.options; //使用外部函数
var X = 0,
Y = 0,
moveX,
moveY;
// 阻止冒泡
element.find('*').not('img').mousedown(function(e) {
e.stopPropagation();
});
//初始化判断
if(parent == 'parent'){
parent = element.parent();
}else{
parent = element.parents(parent);
}
if(!handler){
handler = element;
}else{
handler = element.find(handler);
}
//初始化
parent.css({position:'relative'});
element.css({position:'absolute'});
var boxWidth=0,boxHeight=0,sonWidth=0,sonHeight=0;
//盒子 和 元素大小初始化
initSize();
if(randomPosition){randomPlace();}
$(window).resize(function(){
initSize();
if(randomPosition){randomPlace();}
});
//盒子 和 元素大小初始化函数
function initSize(){
boxWidth = parent.outerWidth();
boxHeight = parent.outerHeight();
sonWidth = element.outerWidth();
sonHeight = element.outerHeight();
}
//位置随机函数
function randomPlace(){
if(randomPosition){
var randX = parseInt(Math.random()*(boxWidth-sonWidth));
var randY = parseInt(Math.random()*(boxHeight-sonHeight));
if(direction.toLowerCase() == 'x'){
element.css({left:randX});
}else if(direction.toLowerCase() == 'y'){
element.css({top:randY});
}else{
element.css({left:randX,top:randY});
}
}
}
handler.css({cursor:'move'}).mousedown(function(e){
isDown = true;
X = e.pageX;
Y = e.pageY;
$this.x = element.position().left;
$this.y = element.position().top;
element.addClass('on');
fun.dragStart(parseInt(element.css('left')),parseInt(element.css('top')));
return false;
});
$(document).mouseup(function(e){fun.dragEnd(parseInt(element.css('left')),parseInt(element.css('top')));element.removeClass('on');isDown = false;});
$(document).mousemove(function(e){
moveX = $this.x+e.pageX-X;
moveY = $this.y+e.pageY-Y;
function thisXMove(){ //x轴移动
if(isDown == true){
element.css({left:moveX});
}else{
return;
}
if(moveX < 0){
element.css({left:0});
}
if(moveX > (boxWidth-sonWidth)){
element.css({left:boxWidth-sonWidth});
}
return moveX;
}
function thisYMove(){ //y轴移动
if(isDown == true){
element.css({top:moveY});
}else{
return;
}
if(moveY < 0){
element.css({top:0});
}
if(moveY > (boxHeight-sonHeight)){
element.css({top:boxHeight-sonHeight});
}
return moveY;
}
function thisAllMove(){ //全部移动
if(isDown == true){
element.css({left:moveX,top:moveY});
}else{
return;
}
if(moveX < 0){
element.css({left:0});
}
if(moveX > (boxWidth-sonWidth)){
element.css({left:boxWidth-sonWidth});
}
if(moveY < 0){
element.css({top:0});
}
if(moveY > (boxHeight-sonHeight)){
element.css({top:boxHeight-sonHeight});
}
}
if(isDown){
fun.dragMove(parseInt(element.css('left')),parseInt(element.css('top')));
}else{
return false;
}
if(direction.toLowerCase() == "x"){
thisXMove();
}else if(direction.toLowerCase() == "y"){
thisYMove();
}else{
thisAllMove();
}
});
}
}
//插件
$.fn.myDrag = function(options) {
//创建实体
var drag = new Drag(this, options);
//调用方法
drag.run();
return this;
}
})(jQuery, window, document);