html5 div 拖动效果,div拖拽效果 JQuery

1

2

3

4

5

6

js bin

7

8 #div{ width:200px; height:200px; background:#ccc; position:absolute;}

9 #div h1{ height:30px; line-height:30px; font-size:12px; text-align:center;background: #f1f1f1;border-bottom: 1px solid #ccc;}

10

11

12

13

14

15

标题

16

17 $.fn.setdrag = function(options){

18 var defaults = {

19 },

20 that = $(this),

21 opts = $.extend({}, defaults, options),

22 doc = $(document),

23 width = $(window).width(),

24 height = $(window).height(),

25 startx = 0,

26 starty = 0,

27 lastx = 0,

28 lasty = 0,

29 box = that.parent(), // handler.parentnode

30 handler = that[0],

31 drag = {

32 down: function(e){

33 that.css('cursor', 'move');

34 startx = e.clientx - parseint(box.css('left'));

35 starty = e.clienty - parseint(box.css('top'));

36 this.setcapture && this.setcapture(); // ie to prevent fast drag losing of object

37 doc.on('mousemove', drag.move);

38 doc.on('mouseup', drag.up);

39 return false; // chrome to prevent rolling screen, and the loss of the mouse move style

40 },

41 move: function(e){

42 lastx = e.clientx - startx;

43 lasty = e.clienty - starty;

44 lastx = math.max(0, math.min(width - box.outerwidth(), lastx));

45 lasty = math.max(0, math.min(height - box.outerheight() - 1, lasty));

46 box.css({'top': lasty + 'px', 'left': lastx + 'px'});

47 window.getselection ? window.getselection().removeallranges() : document.selection.empty(); // cancel the selected text

48 e.stoppropagation();

49 },

50 up: function(){

51 // that.css('cursor', 'auto');

52 doc.off('mousemove', drag.move);

53 doc.off('mouseup', drag.up);

54 handler.releasecapture && handler.releasecapture(); // ie to prevent fast drag losing of object

55 }

56 };

57 that.on('mousedown', drag.down);

58 }

59

60 $('#div h1').setdrag();

61

62

63

64