Draggable Change HTML of Helper

Question

Я бы подумал, что это будет просто, но есть поиск часов для ответа. То, что я хочу сделать, - «клонировать» перетаскиваемый div для помощника, но слегка его изменить. Вот способы, которые я думал сделать это:

1) Обнаружить идентификатор перетаскиваемого в начало, создать или перетащить событие, скопировать html в переменную, изменить его, использовать в качестве вспомогательной функции. Это не работает, потому что помощник создается перед запуском или создает или перетаскивает события, в которых я обнаружил бы перетаскиваемый идентификатор. 2) Обнаружить идентификатор перетаскиваемого в вспомогательной функции, скопировать html в переменную, изменить его, использовать в качестве помощника в функции. Я не мог понять, как получить идентификатор draggable в вспомогательной функции. 3) Используйте клон для помощника, а затем измените хелперный html с помощью события create, start или drag.

Так что мне нужно знать одну из двух вещей:

1) Как обнаружить Див идентификатор перетаскиваемого элемента в вспомогательной функции? или 2) Как изменение меняет html клонированного помощника при запуске событий запуска или перетаскивания?

Вот соответствующий код:

function initiate_draggable() { 
    $('.project_box').draggable({ 
     containment: 'document', 
     cursor: 'move', 
     revert: true, 
     start: loadDragDIV, 
     helper: folder_helper, 
     cursorAt:{top: 5, left: 5} 
    }); 
} 

function loadDragDIV(event, ui) { 
    // How can I change the html of the helper here? 
} 

function folder_helper(event, ui) { 
    // How do I return id of draggable element here so I can copy the html, change it and return it? 
    return changed_draggable_html; 
} 

ТИА,

Jay

Answer 1

Перемещение вспомогательной функции вне draggable определения работает против вас. Лучше всего, чтобы создать функцию в пределах, например, так:

$(".project_box").draggable({ 
    helper: function(){ 
    return $("<div></div>").append($(this).html()).data("clone-id", $(this).attr("id")); 
    } 
}); 

Таким образом, для вашей пользы, вы можете попробовать это: https://jsfiddle.net/Twisty/2gno8cze/

HTML

<div class="project_box" id="pb-1"> 
    Drag Me 
</div> 

CSS

.project_box { 
    background: #FFF; 
    border: 1px solid #000; 
    padding: 1em; 
    width: 60px; 
} 

.box_helper { 
    width: 60px; 
    height: 1em; 
    background: #ccc; 
    border: 1px dashed #000; 
} 

JQuery

function initiate_draggable() { 
    $('.project_box').draggable({ 
    containment: 'document', 
    cursor: 'move', 
    revert: true, 
    //start: loadDragDIV, 
    //helper: folder_helper, 
    helper: function() { 
     var content = $(this).html(); 
     var helper = $("<div>", { 
     class: "box_helper" 
     }); 
     helper.data("content", content); 
     helper.data("box-id", $(this).attr("id")); 
     return helper; 
    }, 
    cursorAt: { 
     top: 5, 
     left: 5 
    }, 
    stop: function(e, ui) { 
     console.log("Clone of #" + ui.helper.data("box-id") + " Stopped."); 
    } 
    }); 
} 

function loadDragDIV(event, ui) { 
    // How can I change the html of the helper here? 
    var cID = ui.helper.attr("id"); 
    ui.helper.data("current-id", cID); 
} 

function folder_helper(e, ui) { 
    // How do I return id of draggable element here so I can copy the html, change it and return it? 
    //return changed_draggable_html; 
    var helper = $("<div>", { 
    class: "box_helper", 
    "data-current-id": $(this).data("current-id") 
    }); 
    return helper; 
} 

$(function() { 
    initiate_draggable(); 
}); 

Итак, теперь вы можете захватить идентификатор, если вы хотите или любые другие атрибуты. Хранение его в data позволяет вам что-то с ним делать позже, не имея противоречивых атрибутов id.