Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve the drag effect of jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

Document .page {text-align:left;} .dragDiv {border:1px solid # ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px # fefefe; position: fixed;} try it yourself. Click and drag to see var _ drag = {}; _ drag.top = 0; / / the position dragged is _ drag.left = 0 above; / / the position dragged is the distance to the left _ drag.maxLeft / / maximum distance to the left _ drag.maxTop; / / maximum distance above _ drag.dragging = false; / / whether to drag the flag / / drag function function bindDrag (el) {var winWidth = $(window) .width (), winHeight = $(window) .height (), objWidth = $(el) .outerWidth (), objHeight = $(el) .outerHeight (); _ drag.maxLeft = winWidth-objWidth, _ drag.maxTop = winHeight-objHeight Var els = el.style,x=0,y=0; var objTop = $(el). Offset (). Top, objLeft = $(el). Offset (). Left; $(el) .mousedown (function (e) {_ drag.dragging = true; _ drag.isDragged = true; x = e.clientX-el.offsetLeft; y = e.clientY-el.offsetTop; el.setCapture & el.setCapture (); $(document) .bind ('mousemove',mouseMove) .bind (' mouseup',mouseUp); return false;})) Function mouseMove (e) {e = e | | window.event; if (_ drag.dragging) {_ drag.top = e.clientY-y; _ drag.left = e.clientX-x; _ drag.top = _ drag.top > _ drag.maxTop? _ drag.maxTop: _ drag.top; _ drag.left = _ drag.left > _ drag.maxLeft? _ drag.maxLeft: _ drag.left; _ drag.top = _ drag.top < 0? 0: _ drag.top _ drag.left = _ drag.left

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.