I simply would like a function that allows all contenteditable child elements draggable using jQuery (no external jQuery plugins).
I found this useful piece of code here How do I make an element draggable in jQuery?.
function draggable(e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
function handle_dragging(e){
var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
This allows draggability on any element by simply typing $('.div').on("mousedown", draggable);
I have also found this useful piece of code here Prevent contenteditable adding <div> on ENTER - Chrome.
$('div[contenteditable]').keydown(function(e) {
// catch the enter key being pressed
if (e.keyCode === 13) {
$(this).find("*").off("mousedown.drag").on("mousedown.drag", draggable);
}
});
i intend on attaching the function to all child elements the contenteditable creates when the user presses enter to make them draggable.
Can anybody help?