Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局–拖拽后弹窗进行编辑
最近后台想一个需求，使用可视化布局-中文 | en中拖拽表格后，弹窗进行编辑，保存下载后在后台生成pdf格式。
奈何各种问题不断，使用jquery-ui中的 draggable各种坑不断，哎，一言难尽，最怕这种不是自己写的，只能不断踩坑，踩着踩着就好了
最终目的效果图
原始效果是没有之后的弹窗，需要点击才会有
思路
- 思路1： 将点击的代码直接放到 拖拽结束时使用即可
- 思路2： 找到被拖拽的对象，对其进行修改即可
- 思路3： 找到点击弹窗的按钮(需要对应到指定的对象)
难点
如何找到指定的元素，每次拖拽添加都会克隆元素，若是通过元素查找便会是一个数组，很多个，这个完全不现实，因而考虑给每一个添加指定的标识。
若是考虑找到被克隆对象，目前我尝试多种方式，直接是找不到，一脸懵逼我，我也很无奈，直接两者间没有联系，尝试过event来找，依旧没有任何效果
代码看问题
html
<div class="preview">表格</div>
<div class="view">
<table class="table" contenteditable="true">
<thead>
<tr>
<th>编号</th>
<th>产品</th>
<th>交付时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Default</td>
</tr>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
</div>
js
// 拖拽的代码
$(".sidebar-nav .box").draggable({
connectToSortable: ".column",
helper: "clone",
handle: ".drag",
start: function(e,t) {
if (!startdrag) stopsave++;
startdrag = 1;
},
drag: function(e, t) {
t.helper.width(400)
},
stop: function(e) {
handleJsIds(e);
if(stopsave>0) stopsave--;
startdrag = 0;
}
});
效果图
各种思路尝试的结果，就不一一列举了，都是泪
- 使用
jquery-ui的draggable的各类属性，始终无效果，modal:ture无法弹窗，结合dialog却无法找到指定被修改对象 - 最终症结所在，便是如何找到你刚拖拽的对象身上，这样一切都好解决
开启找到指定拖拽的对象之旅
思路是有，一直不知道如何有效实现，当看到此处代码时，一切就豁然开朗
// 此处是在拖拽 stop时被调用的
function handleJsIds(e) {
handleModalIds();
handleAccordionIds();
handleCarouselIds();
handleTabsIds();
handleDialog()
}
// 这里看到给每个添加属性，就知道还是要走这条路了
function handleCarouselIds() {
var e = $(".demo #myCarousel");
var t = randomNumber();
var n = "carousel-" + t;
e.attr("id", n);
e.find(".carousel-indicators li").each(function(e, t) {
$(t).attr("data-target", "#" + n)
});
e.find(".left").attr("href", "#" + n);
e.find(".right").attr("href", "#" + n)
}
开始时，一直都在找弹出按钮，因为点击，会出现修改的modal层
重新定义一个函数
hangleDialog
// 用来触发弹窗
function handleDialog(params) {
// 找到所有的按钮
var e = $(\'body.edit .demo [data-target=#editorModal]\')
const n = randomNumber()
e.each(function(i, t) {
// 判断是否添加了flag属性
if (!$(t).attr(\'flag\')) {
$(t).attr(\'flag\', n)
// 触发按钮弹窗
$(t).trigger(\'click\')
}
})
}
总结
目前而言，这个是改动最小的，基本没有对源代码进行修改，只是单纯添加一段而已，个人十分喜欢，其他方式改动幅度过大，效果既没出来，还不敢保证是否会影响其他效果
补充
- 源代码 ，虽说原作者不允许公开，但还是让我找到了，仅供技术探讨吧layoutit
- 一个插件 通过html可以找到对应绑定的事件 visual event
版权声明：本文为sinosaurus原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。