jquery的拖拽UI功能

最新推荐文章于 2023-09-28 15:21:03 发布

我爱上一个大胖子

最新推荐文章于 2023-09-28 15:21:03 发布

阅读量530

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/ggxxyy286/article/details/11315301

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下是原始的实现方式，使用如下链接方式可实现封装：

http://www.cr173.com/html/11969_1.html

3C网站的实现jquery拖拽的实现方式：（有样例）

http://jqueryui.com/droppable/

1、拖拽原始实现算法：

通过mousedown,up,move 设置drag标示位实现拖动算法。

2、实现原理：

Jquery的鼠标键拖动原理

一、知识点：

1、定义一个drag变量，作为是否可以拖动的条件。

2、 Offset，返回的对象包含两个整型的属性：left和top，此方法只对可见元素有效。

3、 Mousedown的时候，获取当前坐标，减去对象坐标，取得距离

4、 mouseMove的时候，先进行判断，获取当前坐标，减去mouseDown获取的距离。得到移动的坐标，将此坐标通过CSS写到函数里面即可。

5、 mouseUp的时候，将drag设置为false，不可拖动即可。

6、 var e = e| window.event ,用来判断浏览器？

7、讲上面的 mouseMove换成mouseTOUCH即可实现手机上的移动。

8、关键点：css的样式，注意position需要设置为absolute,绝对坐标方式。

3、拖拽实现html源代码：（加入了jquery的内容）

<html>
<head>
<title>demo.htm</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<style type="text/css">
.myDiv{
background:#F00;
width: 100px;
height: 100px;
left:100px;
top::200px;
border: 1px solid;
cursor: pointer;
text-align: center;
line-height: 100px;
position:absolute;

}
</style>
<script type="text/javascript">
$(function(){
   var drag = false;
   var ix,iy;
   //do not know what it is
   var offset = $('.myDiv').offset();

   $('.myDiv').mousedown(function(e)
   {

    drag = true;
    ix = e.clientX - $(this).offset().left;
    iy = e.clientY - $(this).offset().top;
    return false;

})

   $(document).mousemove(function(e)
   {
     //如果drag为true，才可以拖动鼠标
     if(drag)
{
      var e = e || window.event;
   var destX =e.clientX- ix +"px";
   var dextY =e.clientY - iy +"px";

   //CSS间使用,分割
      $('.myDiv').css({'left':destX,'top':dextY});

    return false;
}

})

   $(document).mouseup(function(e)
   {
     //鼠标松开后，drag为false，代表不能拖动了。
      drag= false;

    })

})
</script>
</head>
<body>
<div id="myDiv11" class="myDiv">拖拽1</div>
</body>
</html>