(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, grid:null, 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 grid = this.options.grid 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; if(grid!==null){ var gx = grid[0]; var gy = grid[1]; moveX= Math.floor((moveX + gx/ 2) / gx) * gx; moveY= Math.floor((moveY+ gy / 2) / gy) * gy; } function thisXMove() { 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() { 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);