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