当前位置：首页 >前端技术 > 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="waing"><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')}})}