I have a created a draggable div where I want to be able to drag and drop pictures into it. However, the main issue is that once the image is successfully dropped, it cannot be dragged within the div.
Code for working drag & drop:
$('div[role="textbox"]').on(
'dragover',
function (e) {
e.preventDefault();
e.stopPropagation();
}
);
$('div[role="textbox"]').on(
'dragenter',
function (e) {
e.preventDefault();
e.stopPropagation();
}
);
$('div[role="textbox"]').on(
'drop',
function (e) {
// logic for handling image drop
});
Code for drag & drop not working but dragging inside the div works:
// $('div[role="textbox"]').on(
// 'dragover',
// function (e) {
// e.preventDefault();
// e.stopPropagation();
// }
// );
// $('div[role="textbox"]').on(
// 'dragenter',
// function (e) {
// e.preventDefault();
// e.stopPropagation();
// }
// );
$('div[role="textbox"]').on(
'drop',
function (e) {
//logic for handling image drop
})
Is there a way to combine these two sets of code to make both functionalities work properly?
The image is simply inserted as an <img> element.