最近後臺想一個需求，使用可視化布局-中文 | en中拖拽表格後，彈窗進行編輯，保存下載後在後臺生成pdf格式。
奈何各種問題不斷，使用 jquery-ui中的 draggable各種坑不斷，哎，一言難盡，最怕這種不是自己寫的，只能不斷踩坑，踩著踩著就好了
最終目的效果圖
原始效果是沒有之後的彈窗，需要點擊才會有
思路思路1： 將點擊的代碼直接放到 拖拽結束時使用即可思路2： 找到被拖拽的對象，對其進行修改即可思路3： 找到點擊彈窗的按鈕(需要對應到指定的對象)難點如何找到指定的元素，每次拖拽添加都會克隆元素，若是通過元素查找便會是一個數組，很多個，這個完全不現實，因而考慮給每一個添加指定的標識。
若是考慮找到被克隆對象，目前我嘗試多種方式，直接是找不到，一臉懵逼我，我也很無奈，直接兩者間沒有聯繫，嘗試過event來找，依舊沒有任何效果
html
<div>表格</div> <div> <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> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> <tr> <td>2</td> <td>TB - Monthly</td> <td>02/04/2012</td> <td>Declined</td> </tr> <tr> <td>3</td> <td>TB - Monthly</td> <td>03/04/2012</td> <td>Pending</td> </tr> <tr> <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; }});
效果圖
思路是有，一直不知道如何有效實現，當看到此處代碼時，一切就豁然開朗
// 此處是在拖拽 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') } })}
總結目前而言，這個是改動最小的，基本沒有對原始碼進行修改，只是單純添加一段而已，個人十分喜歡，其他方式改動幅度過大，效果既沒出來，還不敢保證是否會影響其他效果
補充