jquery拖动,jquery拖动图片位移

jQuery怎么实现改变div边框和拖动div？

script type="text/javascript"!--

$(document).ready(function()

{

$(".show").mousedown(function(e)//e鼠标事件

{

$(this).css("cursor","move");//改变鼠标指针的形状

var offset = $(this).offset();//DIV在页面的位置

var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离

var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

{

$(".show").stop();//加上这个之后

var _x = ev.pageX - x;//获得X轴方向移动的值

var _y = ev.pageY - y;//获得Y轴方向移动的值

$(".show").animate({left:_x+"px",top:_y+"px"},10);

});

});

$(document).mouseup(function()

{

$(".show").css("cursor","default");

$(this).unbind("mousemove");

})

})

// --/script

相关问答

Q1: jquery如何通过拖动边框改变该div的大小?

jquery通过拖动边框改变该div的大小的实现思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是：

1、组件左上角与屏幕左上角的相对位置

2、鼠标所在坐标与组件左上角的相对位置。

具体函数如下：

.drag{

position:absolute;

background:#0000CC;

top:100px;left:200px;

padding:0;

}

页面整体写法：

$(document).ready(function(){

var move=false;//移动标记

var _x,_y;//鼠标离控件左上角的相对位置

$(".drag").mousedown(function(e){

move=true;

_x=e.pageX-parseInt($(".drag").css("left"));

_y=e.pageY-parseInt($(".drag").css("top"));

});

$(document).mousemove(function(e){

if(move){

var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置

var y=e.pageY-_y;

$(".drag").css({"top":y,"left":x});

}

}).mouseup(function(){

move=false;

});

其中e.pageX,e.pageY为当前鼠标的横纵坐标。

Q2: jquery如何通过拖动边框改变该div的大小

以点击盒子右边框拖拽为例，鼠标按下，获取到鼠标坐标和盒子距离页面左侧的距离，鼠标拖动持续获取坐标，鼠标坐标减去盒子距离左侧的距离就是盒子的宽度，动态赋值即可

Q3: jquery或JS拖动DIV左右移动

html

head

titlejquery或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 + "'/divdiv 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

Q4: jQuery如何实现多个div窗口任意拖动

jquery实现拖拽很简单的：

$(element).myDrag({    

    parent:'parent', //定义拖动不能超出的外框,拖动范围    

    randomPosition:true, //初始化随机位置    

    direction:'all', //方向    

    handler:false, //把手    

    dragStart:function(x,y){}, //拖动开始 x,y为当前坐标    

    dragEnd:function(x,y){}, //拖动停止 x,y为当前坐标    

    dragMove:function(x,y){} //拖动进行中 x,y为当前坐标    

});

具体的可以看这里：jquery.drag.js—实现拖拽效果的插件

有完整的在线实例演示的！！！