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