jquery或JS拖动DIV左右移动

答案:5 悬赏:10 手机版

解决时间 2021-12-25 23:20

提问者网友：战皆罪
2021-12-25 02:24

jquery或JS拖动DIV左右移动

最佳答案

五星知识达人网友：封刀令
2022-01-09 23:05

<html>
<head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
    body {background-color: #fff; }
    .win {position: absolute; top: 0px; left: 0px;width: 300px;height: 222px;}
    .title {height: 20px;width: 300px;  position: absolute;background-color: #0094ff; float: inherit; top: 0px; left: 0px; }
    .winCon { height: 200px;width: 298px; position: absolute; border: solid;
              border-width: 1px; border-color: #0094ff; border-top: none;  float: inherit; left: 0px; top: 20px; }
</style>
</head>
<body onload="showDiv(this,'test1');">
</body>
<script type="text/javascript">
    function showDiv(element, str) {
        $(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>");
        $("#" + str).mousedown(function (event) {
            var offset = $(this).offset();
            _x = event.clientX - offset.left;
            _y = event.clientY + 20 - offset.top;
            $("#win" + str).css({ "top": offset.top - 20 + "px" });
            $("#win" + str).mousemove(function (event) {
                _xx = event.clientX - _x;
                _yy = event.clientY - _y;
                this.style.left = _xx + "px";
                this.style.top = _yy + "px";
                this.style.zIndex = "100";
                return false;
            });
            return false;
        });
        $("#win" + str).mouseup(function () {
            $(this).unbind("mousemove");
            $(this).css({ "z-index": "-1" });
            return false;
        });
    }
</script>
</html>

全部回答

1楼网友：大漠
2022-01-10 02:23

以后问问题的时候,你说清楚别人也好回答你,问问题都不负责的态度,回答问题的人自然不乐意搭理. jquery-ui有一个draggable插件,你自己去jquery网站搜索下吧.

2楼网友：爱难随人意
2022-01-10 01:38

正好我最近在搞jquery所以改写了个插件调用：$(".x-movable").drags({handler:".x-panel-header",zindex:10000,opacity:0.7，direction:"x"}); 你可以参考一下，以下是代插件码: (function($){ $.extend($.fn,{ getcss:function(key){ varv=parseint(this.css(key)); if(isnan(v)) returnfalse; returnv; } }); $.fn.drags=function(opts){ varobg=$(this) varps=$.extend({ zindex:20, opacity:.7, handler:null, onmove:function(){}, ondrop:function(){} },opts); vardragndrop={ drag:function(e){ vardragdata=e.data.dragdata; dragdata.target.css({ left:(ps.direction=="y")?(dragdata.left):(dragdata.left+e.pagex-dragdata.offleft), top:(ps.direction=="x")?(dragdata.top):(dragdata.top+e.pagey-dragdata.offtop) }); dragdata.onmove(e); }, drop:function(e){ vardragdata=e.data.dragdata; dragdata.target.css(dragdata.oldcss); dragdata.ondrop(e); $().unbind('mousemove',dragndrop.drag) .unbind('mouseup',dragndrop.drop); } } returnthis.each(function(){ varme=this; varhandler=null; if(typeofps.handler=='undefined'||ps.handler==null){ handler=$(me); }else{ handler=(typeofps.handler=='string'?$(ps.handler,this):ps.handle); } handler.bind('mousedown',{e:me},function(s){ vartarget=$(s.data.e); varoldcss={}; if(target.css('position')!='absolute'){ try{ target.position(oldcss); }catch(ex){} target.css('position','absolute'); } oldcss.opacity=target.getcss('opacity')||1; vardragdata={//初始数据 left:oldcss.left||target.getcss('left')||0, top:oldcss.top||target.getcss('top')||0, width:target.width()||target.getcss('width'), height:target.height()||target.getcss('height'), offleft:s.pagex, offtop:s.pagey, oldcss:oldcss, onmove:ps.onmove, ondrop:ps.ondrop, handler:handler, target:target } target.css('opacity',ps.opacity); $().bind('mousemove',{dragdata:dragdata},dragndrop.drag) .bind('mouseup',{dragdata:dragdata},dragndrop.drop); }); }); } })(jquery); 调用说明：$(".x-movable").drags({handler:".x-panel-header",zindex:10000,opacity:0.7，direction:"x"}); 其中$(".x-movable")是要被移动的div,".x-panel-header"是拖动手柄，科省略。direction是移动方向，有"x"和"y"两个参数。下面是我实际运用中更复杂的例子： $(".x-layout-split-west").drags({ zindex:10000, opacity:0.7, direction:"x", ondrop:function(e){ $(".x-layout-split-west").removeclass("x-splitbar-proxy") varl=parseint(e.data.dragdata.target.css("left")) if(l<ps.wmin){l=ps.wmin;} if(l>ps.wmax){l=ps.wmax;} ps.ww=l ps.cl=l+ps.margins ps.cw=w-ps.ew-ps.cl-ps.margins $("#west").css({width:ps.ww}); //$("#west").css({left:l}); //$("#center.x-panel-body").css({width:ps.ch}); $("#center").css({width:ps.cw,left:ps.cl}); $(".x-layout-split-west").css("left",l) }

3楼网友：西风乍起
2022-01-10 01:04

只需要<div id="moveId">adsfasdfadf</div> 放到页面的JS前面加载就可以拖拽了，

或者加载【$.Move($('#moveId'));】这个方法，放到节点加载完后加载。就可以解决了，方法如下。 $(document).ready(function(){ $.Move($('#moveId')); })

4楼网友：煞尾
2022-01-10 00:17

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息