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