My application needs to be able to drag images from one div and drop them to another div that is the “droppable” area. These images once dropped must still have the ability to be draggable within the droppable area. I am also capturing the text from the image and saving it to a database.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">"">
<title>jQuery UI Draggable – Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable({helper:'clone'});
$('#dropable').droppable({
accept: '#draggable',
drop: function(ev, ui){
let dropItem = $(ui.draggable).clone();
$(this).append(dropItem);
}
});
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content" style="background:red; height:400px; width:400px; border-radius:4px">
<p>Drag me</p>
</div>
<div id="dropable" style="height:400px; width:500px; background:#f4f4f4; float:right; position:relative; margin-top:-500px; margin-right: 50px"></div>
</body>
</html>
Copy, Paste and save into database
Copy click
<a href="javascript:void(0);" onclick="copyMeal('{{$meal1day1->meal}}')"><i class="fa fa-copy"></i></a>
Copy function
function copyMeal(meal_text)
{
// Get the text field
var copyText = meal_text;
//console.log("aaa",copyText);
// Copy the text inside the text field
navigator.clipboard.writeText(copyText);
// Alert the copied text
sweetAlert("Meal Copied", "", "success");
// var sel = document.getSelection();
// console.log("copied",copyText);
sessionStorage.setItem('copyText',copyText);
}
Paste buttion/place
<a href="javascript::void(0);" onclick="pasteMeal('{{$meal1day1->meal_id}}')"><i class="fa fa-paste"></i></a>
Paste function
function pasteMeal(meal_id)
{
var copiedText=sessionStorage.getItem('copyText');
$.ajax({
url : '/updatecopiedmeal',
data:{"meal_id": meal_id,"copiedText": copiedText},
type : 'POST',
success : function(response) {
location.reload();
sweetAlert("Meal Pasted", "", "success");
}
});
}
