文章/答案/技术大牛

发布

jquery 网页拖拽布局

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。网页拖拽布局是指用户可以通过鼠标拖动页面元素来改变它们的位置和大小，从而实现自定义的页面布局。

类型

基于 jQuery UI 的拖拽布局：jQuery UI 提供了 draggable 和 droppable 组件，可以实现元素的拖拽和放置。
基于 Sortable.js 的拖拽布局：Sortable.js 是一个轻量级的库，专门用于实现列表和网格的拖拽排序。

应用场景

网站布局调整：用户可以根据自己的喜好调整页面元素的位置。
内容管理系统（CMS）：在 CMS 中，用户可以拖拽页面元素来创建和编辑页面布局。
仪表盘和数据分析工具：用户可以通过拖拽来调整图表和数据的位置和大小。

示例代码

以下是一个使用 jQuery UI 实现简单拖拽布局的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Draggable Example</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;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="draggable">Drag me!</div>

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

常见问题及解决方法

拖拽不流畅：
- 原因：可能是由于页面元素过多或 JavaScript 执行效率低导致的。
- 解决方法：优化代码，减少不必要的 DOM 操作，使用事件委托等技术提高性能。

拖拽元素超出边界：
- 原因：没有设置拖拽元素的边界限制。
- 解决方法：使用 containment 选项来限制拖拽元素的范围。

$("#draggable").draggable({
    containment: "parent"
});

拖拽事件冲突：
- 原因：可能是由于其他 JavaScript 代码或插件与 jQuery UI 的拖拽事件冲突。
- 解决方法：检查并调试代码，确保没有其他事件处理程序干扰拖拽事件。

通过以上方法，可以有效地实现和优化网页拖拽布局功能。

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

有帮助

没帮助

有没有一个软件可以让我的网站的网页布局？

、、、、

我正在寻找一个软件，在其中我可以轻松地使我的网站的网页布局拖拽类型的方式。OS: Windows或Linux 优惠:自由和开放源码软件/免费

浏览 0提问于2020-06-10得票数 0

回答已采纳

1回答

可排序手柄，拖动动画始终向左

、、、

我正在尝试将拖动动画的偏移量从控制柄向右翻转，而不是向左。每当我想要拖动它时，当手柄在右边时，动画就会自动从左边开始。我希望它从右边开始。 <li> <div class = "leerrails_list_img" style="

浏览 4提问于2020-08-10得票数 1

1回答

所以我刚开始在网络开发人员在线课程中使用jQuery，我开始使用jQuery UI，但当我按照视频中的步骤进行设置时，它不起作用。我试着在我的文本编辑器中放一个可拖拽的东西，它甚至都没有弹出来。我试着改变链接的目录，以便放入一个类似拖拽的东西，我试着处理一些我可以用我的代码造成的小错误，但似乎什么都不起作用。我不确定我做错了什么，如果能帮助我找出问题所在，我将不胜感激。这是我网页的代码： <!/3.4.1/jquery.min.js"><&

浏览 21提问于2020-02-13得票数 0

1回答

拖放后保留三行布局的问题

、、、

我想在ul中创建一个由一些li元素组成的行，所以我使用了jQuery1.9.1和jquery ui。一切工作正常，但是有些事情和我预期的不一样。事实上，当你尝试拖拽"Container 4“并将其放在"Container 3”的位置时，网格会发生变化，由四行组成。有什么想法吗？

浏览 4提问于2013-05-13得票数 2

1回答

可拖放的元素在拖放的页面中拖动

、

我使用了jquery布局，并在该布局中使用了拖放。但是我不明白为什么可拖放的元素没有拖入拖放的区域。我用它来拖拽，但不能成功 jQuery(".component").draggable({ //by a pane helper: fun

浏览 0提问于2012-01-09得票数 0

1回答

使用jQuery mobile开发的网站在手机和平板电脑上的行为

、、

如果我在平板电脑上打开相同的网站，屏幕大小会不同，内容会扩展到屏幕宽度，因为它是液体布局。这就是我想知道的。如果我使用jQuery手机设计一个按钮，它将占据整个屏幕的宽度(虽然我们可以改变，但这不是我的情况)。但在tablet PC中，它会扩展到屏幕的总宽度，这看起来并不好。不是吗？所以，这里我的问题是jQuery移动开发人员应该注意哪些事情。有必要为不同的屏幕分辨率开发网站吗？

浏览 0提问于2012-10-04得票数 1

回答已采纳

4回答

使用jQuery使元素不可选

、

使用jQuery使元素不可选的最佳方法是什么？我还看到有人做了一个jQuery插件： ..这样的插件有必要吗？想要这样做的原因纯粹是美学上的。对于有拖拽或点击事件的网页，当选择了一些东西时，这不是很好。

浏览 1提问于2010-04-30得票数 4

回答已采纳

1回答

使用jquery和javascript创建多个可拖动对象

、、、

使用jquery，如何通过javascript使用循环创建多个可拖动对象？我想创造这样的东西。使用自动完成功能，我希望用户选择一个标记，并将其用作可拖放到可拖放屏幕上的可拖放对象的显示名称。

浏览 0提问于2012-01-18得票数 0

回答已采纳

1回答

对于少数android设备，Jquery拖放速度很慢

、、

我是编程新手，我正在使用jquery ui拖拽和离子游戏.For，少数设备的拖拽非常流畅，但对于少数设备来说，它非常慢，.Can有人建议我，有没有什么可以用平滑的touch.Thank来拖拽jquery

浏览 2提问于2016-11-22得票数 0

9回答

移动设备上的HTML拖放

、、、

当你使用JavaScript向网页添加拖放功能时，比如jQuery UI draggable和droppable，当你在移动设备上通过浏览器查看时，你如何让它工作--在这种情况下，拖拽的触摸屏操作会被手机截获为移动设备编写一个应用程序来执行此操作，而不是尝试让网页在移动设备上运行！您的建议和评论。

浏览 63提问于2010-07-04得票数 98

回答已采纳

1回答

使整个页面可拖动

、、、

我想做一个网页，可以拖在所有方向与不同的HTML元素在所有方向，并加载新的元素，因为你得到了通过AJAX的边缘。我希望通过Bootstrap或JQuery来实现这一点。关于如何让页面像那样拖拽，有什么建议吗？

浏览 0提问于2015-06-14得票数 0

1回答

JQuery打乱网页布局

我有一个可以正常工作的Spring Roo webapp，但是里面没有任何jQuery。现在我想添加一些Ajax功能，所以我下载了jQuery .js文件，并将其包含在布局文件的"head“部分中，如下所示：现在，当我加载应用程序时，我所有的资源都消失了(

浏览 0提问于2012-02-27得票数 1

回答已采纳

2回答

自定义滚动条:在非webkit浏览器中不支持鼠标滚动。(jScrollPane)

、、、、

我正在使用创建自定义滚动条样式。jScrollPane适用于所有现代浏览器，但滚动功能仅适用于Webkit浏览器(Safari和Chrome)。尽管在中，鼠标滚动在所有浏览器中都具有完整的功能。

浏览 1提问于2012-01-17得票数 0

回答已采纳

1回答

React.js中的拖放

、

我试图在网页上做一个拖放功能，但到目前为止还没有成功。我想使粉红框中的A、B、C卡在我们将它们的副本拖到黑匣子之后保持在原来的位置(就像菜单栏，作为这种行为的演示)。

浏览 2提问于2021-06-13得票数 1

2回答

在jquery UI drop effect中，如何找到被拖拽的元素？

、

在jquery UI拖拽效果中，如何找到被拖拽的拖拽效果？

浏览 1提问于2012-03-09得票数 1

回答已采纳

1回答

如何通过jQuery插件拖放链接/页面？

、、、

嗨，我正在做一个关于创建jQuery用户界面的自我项目，允许用户拖放链接/网页，特别是从维基百科的文章到某种“组织者”，比如纸牌中的堆栈。我希望添加各种功能，如当用户拖拽维基页面到用户界面，如分组项目/卡片可视化。我不知道该从哪里开始，因为我对jQuery还比较陌生。是否可以从维基百科中拖动页面并将其放到jQuery UI中？

浏览 3提问于2011-03-20得票数 7

回答已采纳

3回答

Android触摸和滚动列表视图

我在我的应用程序中有一个自定义的列表视图，其中的列表项是可拖动的，并且可以放在列表视图itself.Now上的另一个位置。我的问题是，我想滚动列表视图。我尝试使用onIntercept触摸事件，但只有触摸事件发生。我不能滚动，有人能给我一个如何实现这个东西的想法吗？

浏览 2提问于2012-10-19得票数 3

回答已采纳

2回答

Drupal可拖动块问题

、、、、

Druapl提供了很好的功能，可以上下拖动块来重新排序，如下所示。

浏览 0提问于2010-06-01得票数 1

回答已采纳

1回答

</div>导出为包含所有资源的html文档(如联机网页模板生成器)

、、、、

我目前正在建立一个使用js，jQuery，Ajax，jsp和html的拖放功能的在线网页创建器。我寻找代码，以发布后，通过拖拽完成bage的内容模板。<div>..

浏览 3提问于2015-12-18得票数 0

1回答

如何启用自定义拖放(ext js 4.1.3)

、

编辑:我删除了与问题无关的代码当我在数据视图创建的任何div中单击并拖动时，我开始选择文本，而不是拖动数据视图项。我尝试添加了"draggable: true“和"enableDrag: true”。他们都不允许我拖动div。然而，"draggable: true“确实使得当我点击并拖动时，我不再选择文本。Ext.require(

浏览 0提问于2013-02-19得票数 1

回答已采纳

点击加载更多