开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery 多个div拖拽

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。拖拽（Drag and Drop）是一种用户界面交互方式，允许用户通过鼠标或触摸屏移动元素。

相关优势

简化代码：jQuery 提供了丰富的 API，使得实现拖拽功能变得简单。
跨浏览器兼容性：jQuery 处理了许多浏览器之间的差异，使得拖拽功能在不同浏览器中表现一致。
丰富的插件支持：有许多现成的 jQuery 插件可以用来实现拖拽功能，如 jQuery UI。

类型

内部拖拽：在同一页面内的元素之间进行拖拽。
外部拖拽：将页面内的元素拖拽到页面外或其他应用程序中。
排序拖拽：对一组元素进行排序。

应用场景

拖拽排序：如在线购物车中的商品排序。
拖拽布局：如网页布局工具，允许用户通过拖拽调整元素位置。
拖拽上传：如文件上传功能，允许用户通过拖拽文件到指定区域进行上传。

示例代码

以下是一个使用 jQuery UI 实现多个 div 拖拽排序的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery UI Drag and Drop</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="sortable">
        <div class="draggable">1</div>
        <div class="draggable">2</div>
        <div class="draggable">3</div>
        <div class="draggable">4</div>
        <div class="draggable">5</div>
    </div>

    <script>
        $(function() {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });
    </script>
</body>
</html>

常见问题及解决方法

拖拽不生效：
- 确保引入了 jQuery 和 jQuery UI 库。
- 确保在 DOM 加载完成后初始化拖拽功能。

拖拽元素重叠：
- 使用 CSS 设置元素的 position 属性为 absolute 或 relative。
- 使用 jQuery UI 的 stack 选项来控制元素的堆叠顺序。
拖拽过程中出现闪烁：
- 使用 CSS 的 transform 属性来优化性能，如 transform: translate3d(0, 0, 0);。

通过以上示例代码和解决方法，你应该能够实现并解决 jQuery 多个 div 拖拽的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

div拖拽实现延伸

div拖拽原理：鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。...如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture。代码： html&css： <!...position: absolute; color: #fff; } div...id="test">4616125div> js /* * @Author: lee * @Date: 2018-07-10 11:40:31 * @Last

1.3K3 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果 div id="box">div> <script type="text/javascript

9.9K2 0

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。...一、滚动条有关属性的正确理解：假设有以下Html代码： div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;..."> div style="height:750px;"> div> div> 由于内部的div标签高度比外部的长，并且外部的div允许自动出现垂直滚动条，所以用浏览器打开后... jquery-1.10.2.js"> IE 和 FF 下测试通过div> div> 代码解说：内部div高度为750，外部div

2.8K1 0

JavaScript 鼠标拖拽div 改变其大小

转自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能，类似于soso地图（即现在的腾讯地图...）的看街景时地图可以拖拽等功能 ?...那么找到相应的js事件：mousedown、mousemove、mouseup 找到这几个事件，基本上我们的功能可以说完成了一半了，只需要在里面做相应事件处理就能搞定了，具体看下代码，很简单的操作：拖拽...div div> jquery.js"> <script type="

1.7K3 0

鼠标拖拽移动DIV 记录一下

document.onmousemove = function (ev) { const _e = ev || e //移动时，鼠标距离当前窗口x轴坐标 - 鼠标在拖拽元素的坐标...= 剩下距离body的x轴坐标 //将这个数值设置为拖拽元素的left、top let boxLeft = _e.clientX - distanceX;...const clientWidth = document.documentElement.clientWidth || document.body.clientWidth //限制拖拽宽高...mainDiv.style.top = boxTop + 'px' mainDiv.style.left = boxLeft + 'px' } // 鼠标松开事件结束拖拽

1.2K2 0

JQuery实现图片拖拽缩放特效

给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下：实现代码如下，欢迎大家复制粘贴。基于JQuery...实现的图片拖拽缩放特效 #box { width: 200px;...id="box" style="width: 100px; height: 100px; top: 100px; left: 100px;"> div id="dot">div>...div> jQuery/jquery-3.1.1.min.js">

8.3K1 0

jquery自定义控件拖拽框dragbox

概述：在做项目的过程中遇到了拖拽框的使用，虽然网上有很多类似的插件，但总归不如自己的好使，于是就自己写了一个，在此总结下来，以便后用。效果： ?...= $(this); _dragBox.css("width",_width+"px").addClass("dragbox"); var _close = $("div.../>").appendTo(_dragBox).addClass("dragbox close"); var _titleBox = $("div />").appendTo(_dragBox.../jquery-1.8.3.js"> jquery.custom.dragbox.js"> ... div id="dragbox">div>

2.5K2 0

基于JQuery实现的图片拖拽缩放特效

给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下：实现代码如下，欢迎大家复制粘贴。基于JQuery...实现的图片拖拽缩放特效 #box { width: 200px;...background-color: #09C; border: 1px dashed #fff; } jquery...: 100px;"> div id="coor">div> div> $(function () {

5.4K0 0

使用jQuery Draggable和Droppable实现拖拽功能

但是测试拖动结果，发现元素只能在它所在的container里面拖动，再往右拖动，div会出现水平或垂直滚动条。不知道是不是自己在参数设置上不对。container设置了overflow:auto。...”，这div一直在页面上。...只是默认不显示，只要用户开始拖拽左侧的元素时，它就出现了。当然这里需要自己手动添加很多代码。...div id='draggableDiv' class="ui-widget-content"> 中间拖拽容器元素 div> <script type="text/..."); }, stop: function () { console.log("拖拽结束"); } }); .csharpcode,

2.9K6 0

JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）

接着鼠标拖拽div（1）解决问题，当在拖拽事件所在的页面按下键盘的ctrl+A全选后，再去拖拽div，浏览器会默认去搜索网页中的内容，拖拽功能就会失效，（搜索网页内容是浏览器的默认行为，所以要想不发生这种情况...可以将setCapture()方法用到鼠标拖拽div的例子中，但是注意，在给mousedown事件中，调用的box的**setCapture()方法之后，会有一个问题，就是当鼠标松开之后，事件还会一直被捕获...，网页中的其他选项都无法点击，而且就算鼠标松开，div也还会跟着鼠标对应的位置移动，为了解决这个问题，就需要在鼠标松开的时候取消捕获，可以使用releaseCapture()**方法来取消先前调用的捕获方法...优化拖拽代码在之前拖拽div的代码中，如果要拖拽多个内容，就需要重新为一个内容绑定事件，所有的操作都要重新写一遍，所以对之前的代码进行了优化：定义函数，将拖拽的方法封装起来，方便调用，要拖拽哪个元素...id="box">div> div id="box1">div> 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/

2.4K2 0

JQuery 操作CSS使DIV显示或者隐藏

在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。

4.1K1 0

jquery点击删除按钮,删除当前的div

现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要写一个this事件即可。 ?...cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> jquery.../2.1.1/jquery.min.js"> div id="stoparea"> div style="margin-bottom...> div> div> // 删除按钮事件 $(".editdelete

5.2K3 0

Jquery实现可拖拽的树菜单「建议收藏」

runat=”server”> Jquery...0 0; cursor: pointer; } jquery...= “treeDemo”) { //为顶级文件夹拖拽至顶级不显示样式,【即顶级不能再拖拽至顶级】 $(rootUlId)....div>实现移动 3.释放时removediv> //实现方法:1.mousedown 2.mousemove 3.mouseover 4.mouseup ...div ZTreeMask = “div id=’zTreeMask_” + currentDrageNodeId + “‘ class=’dragingNode’ style

4.5K3 0

jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

/* 网上找了资料都是对于event.clientX和offset().left进行了计算，但是去掉了这个计算方式，直接使用当前坐标也一样，效果都一样不太好 strHeader:标题 jquery定位字符串...strForm：窗体 jquery定位字符串 */ var isMove = false; //var x = 0; //var y = 0; //var offx = 0; //var offy =

2.5K4 0

jQuery的ztree仿windows文件新建和拖拽效果

前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是树状菜单、树状数据。.../js/jquery-1.9.1.js" /> div class=""> div> 新建组 div> div...pathName.substr(1).indexOf('/') + 1); return (localhostPath + projectName); } }) 好了，到此为止，一个可以添加新的节点和拖拽树形菜单的功能就实现了

2K3 0

强烈推荐：240多个jQuery插件

ToggleVal. jQuery Field Plugin. jQuery Form’n Field plugin. jQuery Checkbox manipulation. jTagging. jQuery...搜索插件(Search Plugins) jQuery Suggest. jQuery Autocomplete. jQuery Autocomplete Mod. jQuery Autocomplete...jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery Photo Slider. jQuery Thumbs...EO Gallery. jQuery ScrollShow. jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin..... jQuery autoSave. jQuery Puffer. jQuery iFrame Plugin.

2K4 1

jquery validate 如何校验多个相同name

-- 三个相同name的input --> jquery validate...在对多个相同name校验时，只校验第一个input框。...---- 解决方案一：在表单页对应的js中加入如下代码只有当前页可以解决对多个name校验 if ($.validator) { $.validator.prototype.elements...return true; }); } } ---- 解决方案二：修改源文件所有的页面都可以验证多个...name 方式1：修改jquery.validate.js文件用 ctrl+F 查找 this.name in rulesCache 注释掉如下代码。

1.1K1 0

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： div id="exPara" style="display:none"> 22222222 div> jquery 代码

8.9K3 0

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能，点击左下角的图标按钮，地图的整个div会变大，变大预览之后，再次点击图标按钮，地图的整个div会变小，恢复原样，两个图标在地图界面的放大和缩小时间不断的切换图标状态（箭头向里面，或者箭头向外面... jquery.com.../jquery-1.8.0.min.js"> #scale { background: #FFFFFF...400px; height: 200px } div...id="scale" style="">div> div id="updmap"> div> <script

3.8K2 0

jquery实现下拉框选中对应的div

这是一个很简单的功能，jquery实现下拉框选中对应的div。虽然简单但是会在项目之中经常会用到，尤其是统计的时候，按照不同类型或者不同的年月日来选择相对应的内容。 ? jquery实现下拉框选中对应的...div jquery.com/jquery-1.8.0.min.js"> div id="div1">111div> div id="div2" style="display:none;">222div> div id="div3"...style="display:none;">333div> div id="div4" style="display:none;">44444div> div id=

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭