使bootstrap面板可放置并可拖动
，可以通过使用第三方库来实现，比如jQuery UI的draggable和sortable插件。
- 首先，确保已经引入了jQuery和Bootstrap的相关文件。
- 引入jQuery UI的相关文件，可以从官方网站下载或使用CDN链接。
- 在HTML中，创建一个包含面板的容器，例如一个div元素，并为其添加一个唯一的id。
<div id="panel-container">
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">
面板内容
</div>
</div>
</div>- 在JavaScript中，使用jQuery选择器选中面板容器，并调用draggable()方法使其可拖动。
$("#panel-container").draggable();- 如果希望面板可以放置在其他容器中，可以使用sortable()方法使其可排序。
$("#panel-container").sortable();完整的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>可拖动面板</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div id="panel-container">
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">
面板内容
</div>
</div>
</div>
<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.js"></script>
<script>
$(document).ready(function() {
$("#panel-container").draggable();
$("#panel-container").sortable();
});
</script>
</body>
</html>这样，你就可以通过拖动面板来改变其位置，并且可以将面板放置在其他容器中进行排序。
相关·内容
1回答
我有一个面板，我希望能够拖放。为了使面板可拖动，我使用了文档中提到的面板的' draggable‘属性。但是，由于此属性，我在不同的浏览器中看到面板的不同行为。
请参考下面的示例代码。，“可拖动”属性设置为“true”。但是，当我试图在IE10 (64位桌面，Win-7)上运行应用程序时，面板在一个位置相互重叠，这是可拖式面板的意外行为。您必须将顶部面板
浏览 2提问于2013-12-05得票数 0
回答已采纳
我正在学习jQuery UI和Bootstrap，我正在尝试实现可拖/可排序的面板，它几乎可以工作。在最右边的列中拖动一个面板，即而不是，用鼠标移动面板，而占位符在鼠标下移动，除非将其移动到最右边的列上。如果从最右边的列拖动面板，则面板将
浏览 6提问于2015-03-12得票数 11
回答已采纳
2回答
我正在创建一个“裁剪工具”，我需要使一个面板，其中包含2个按钮可拖动。localMouseClickPoint = new Point(e.X, e.Y); }我的问题是:如何使该面板在窗体中可拖动(我的意思是单击面板，然后将其拖动到某个位置)。
浏览 0提问于2014-02-07得票数 0
1回答
我试图在extjs面板中拖放一个图像。但是它并没有起作用。我只想像jquery的可拖放演示中那样拖放元素。有没有简单的解决方案，因为我没有找到。好的，我试过这样做：
面板内的面板(包含图像的html代码)。dreagable = true。但我不能拖拽它，就像放置XY一样。
浏览 0提问于2011-03-01得票数 2
回答已采纳
通过将x、y和数组的其他信息放置在固定的可拖动绝对窗格中，我设法解决了这个问题。是否有一种方法来放置这个面板，每次鼠标悬停在一个点附近的指针？此外，如果鼠标没有悬停在任何点上，我如何隐藏面板？当前，该面板是可拖动的，并使用以下代码固定在页面顶部。
浏览 1提问于2016-09-06得票数 1
回答已采纳
1回答
我通过下面的代码制作了一个引导面板 <div class="panel-heading clearfix" id="drag">Andiv class="panel-body">I want to be dragabble</div>造型是cursor: move;我尝试使用jquery代码使<e
浏览 1提问于2018-03-05得票数 0
1回答
我有一个(相当小的)面板，里面满是标签和一些其他控件。我已经使这个面板可拖动，但由于大小和内容，只有几个“洞”，实际上激活了拖放(例如角落)。有没有办法在面板的“背景”上显示所有的标签，这样我就可以点击面板上的任何地方来触发拖动事件？
我希望我的问题足够清楚。
浏览 0提问于2013-06-11得票数 1
回答已采纳
1回答
我想要做的是通过单击p:splitButton上的按钮将组件动态添加到仪表板上，将组件添加到仪表板上是可行的，但是由于某些原因，面板是不可拖动的。为什么？<!
浏览 3提问于2015-12-11得票数 0
回答已采纳
1回答
在拖放一个项目时，我呈现了一个bootstrap面板，其中包含主体中的各种项目(取决于被拖放的内容)。$( ".panel-default" ).draggable();
因为我认为这将允许每个面板是可拖动的。
浏览 5提问于2016-09-19得票数 0
3回答
当拖动项位于固定位置侧面板后面时，Jquery可拖式和可下拉式存在问题。父可拖#图库容器必须具有相对位置，因为我使用Muuri作为网格布局。如果我在侧面板上放置一个z索引，它就会以它应该的方式出现在容器上，但是拖动项总是出现在它的后面，而不是尊重ui拖动项的更高的z索引。如果我移除侧面面板上的z索引，那么当容器应该在顶部时，侧面面板显然会在容器后面。#trash { position: fixed; z-
浏览 1提问于2019-04-01得票数 0
回答已采纳
1回答
我想创建一个Bootstrap弹出窗口，它遵循一个可拖动的图像(使用jQuery UI可拖动库)。通过“跟随”，我的意思是，如果图像向右拖动10个像素，弹出窗口也会向右移动10个像素。我遇到的问题是，我不确定如何将Bootstrap弹出窗口链接到图像。popover intializer上的'container‘参数似乎不起作用(理想情况下，我希望将图像和popover放在父div中，并使该div可拖动)。
浏览 0提问于2013-05-21得票数 2
回答已采纳
twitter bootstrap有窗口控件吗？仅仅是一个可拖动的、可关闭的非模态窗口？在窗口中，我将放置诸如颜色选择器、输入字段、滑块之类的控件。等
它将作为一个对象检查器..有什么线索吗？
浏览 2提问于2013-04-08得票数 0
回答已采纳
我有一个包含多个可拖动对象的Pane对象。这些对象在窗格中按从左到右和从上到下的顺序填充，并且都是可拖动的。当放置在其他项目之前的项目之一被拖动时，问题就出现了，它出现在该项目之后填充的项目下面。这里我试图拖动"public"，但它出现在它之后填充的对象的下面。
浏览 0提问于2013-04-14得票数 0
回答已采纳
1回答
我更喜欢后者，因为它具有在地图上放置标记和多边形的功能。但是，缺点是，由于某些原因，我不能用鼠标拖动地图。在JMapViewer包中，有一个Demo类，它显示相同的行为。如何在JMapViewer中使OSM映射可拖放？
编辑:此代码将绘制一个可以显示在面板中的地图，并通过添加mapController和setMovementMouseButton()使地图可拖动。
浏览 0提问于2012-07-25得票数 3
回答已采纳
1回答
如何使[PANEL(2)]对用户可调整大小，因为它们只能从两侧调整宽度？这就是当用户将面板调整为(随机区域)大小时面板的外观。
浏览 0提问于2013-05-29得票数 5
回答已采纳
2回答
YUI面板和滚动
、、
我有一个可拖动的YUI面板，定义如下 fixedcenter: true,close: true, width: "350px" });
当面板显示时问题是，当滚动窗口时，即使它以前被拖动到其他地方，面板<
浏览 2提问于2009-03-08得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
