Scenario: A draggable DIV element containing a select dropdown Draggable has a clone helper. Select an option on the dropdown. When dragging, the clone helper does not retain the newly selected option. Instead, it uses the original option that was selected when the element was loaded.
Example:
html code:
<div class="master">
<div class="draggable-container">
<div class="select-container">
<select class="select">
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
</select>
</div>
</div>
</div>
Javascript:
$( '.draggable-container' ).draggable({
disabled: false,
connectToSortable: ".sortable-container",
helper: "clone",
revert: "invalid",
opacity: 0.35
});
Expected behavior: the clone helper should keep the newly selected option
The only way I see at this point is to add a function to the drag event that captures the original element's value then apply that value to the clone. But my instinct tells me jQuery should probably have a setting to keep the clone up-to-date with the original element changes.
Example:
$( '.draggable-container' ).draggable({
disabled: false,
connectToSortable: ".sortable-container",
helper: "clone",
revert: "invalid",
opacity: 0.35,
drag: function( event, ui ) {
$( this ).find( '.select' ).each(
function(){
var indice = $( this ).val();
var u = ui.helper[0];
$( ui.helper[0] )
.find( '.select' ).each(
function(){
$( this ).val( indice );
});
});
}
});
And finally, when I combine draggable and sortable by dragging to a different sortable element, the dropped clone reverts to the original selection -- even though I used the "drag" event to update the clone.
I might just create another function for the update on the sortable, but that just seems the longest path.
QUESTION: Is there any setting on jQuery-ui draggable that makes the clone helper preserve the select change?
