JQuery UI: how to convert element to circle when sorting or dragging
I want to know that I can convert an element to a circle by sorting or dragging it (the element) including its children. I have tried but its incomplete.
$('#editorDesignView').sortable({
cursor: 'move',
start: function( event, ui ) {
$(ui.item).addClass("sortable-change");
},
stop: function( event, ui ) {
$(ui.item).removeClass("sortable-change");
}
});
Updated:
$('#editorDesignView').sortable({
// opacity: 0.6,
handle: ".draggable-area",
cursor: 'move',
start: function( event, ui ) {
$(ui.item).addClass("on-sortable-change");
},
stop: function( event, ui ) {
$(ui.item).removeClass("on-sortable-change");
}
});
+3
source to share
1 answer
Instead of transforming an element with CSS, there is a standard way to accomplish your goal. Its as follows:
$('#editorDesignView').sortable({
cursor: 'move',
helper: function(){
return $("<div class='sortable-change'></div>");
},
cursorAt: { left: -60, top: 20 }
});
We can use helper and cursorAt when initializingsortable
The updated codepen can be seen here: http://codepen.io/anon/pen/QvVRgz
+4
source to share