jQuery实现拖拽

最新推荐文章于 2025-05-22 11:48:09 发布

笨-大叔

最新推荐文章于 2025-05-22 11:48:09 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 拖拽

本文链接：https://blog.youkuaiyun.com/u014703834/article/details/41847621

本文介绍如何利用jQuery实现拖拽功能，主要涉及mousedown、mousemove、mouseup等鼠标事件，通过改变目标元素的绝对定位来达到拖动效果。适合前端初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽是在前端开发中，经常用到的一种使得目标文件位移的效果。其核心事件是鼠标的三个事件，mousedown(),mousemove(),mouseup(),通过改变目标绝对定位div的位置来实现拖动。

这里分享我的代码，希望得到大神的指点。

在文章的最后，将提供免费的代码资源，供和我一样的菜鸟学习。

HTML：

    <div class="Pparent">
      <div class="parent">
        <span id="drag">点击移动</span>
      </div>
    </div>

CSS：

      *{margin: 0;padding: 0;}
      .Pparent{width: 1200px;height: 500px;margin: 100px auto 0;background: #454545;position: relative;}
      .parent{width: 100px;height: 100px;background: cyan;position: absolute;}
      .parent>span{width: 100%;height: 20px;display:block;text-align: center;cursor: move;background: pink}

JS：

$(function(){
	function setDrag(id){
		var that     = $(id),
			Parthis  = that.parent(),//
			Pparthis = Parthis.parent(),
			startX   = 0

最低0.47元/天解锁文章

200万优质内容无限畅学