Develop Reference

jQuery function based on area of an image

I would like to feed a cat with burgers. If you grab a burger and bring it to the cat's mouth, the burger should disappear.
Currently it looks like that:
$(function() {
$(".burger").draggable();
});
$(".burger").on("click touchend", function() {
$(this).css("display", "none");
});
* {
font-size: 50px;
}
img {
width: 200px;
}
.burger {
cursor: grab;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Manul_kitten.jpg">
<div class="burger">🍔</div>
<div class="burger">🍔</div>
<div class="burger">🍔</div>
How can I let it work that the burger only disappears close to the cat's mouth?

create hidden element above the image and set droppable.
$(function() {
$(".burger").draggable({ revert: "invalid" });
});
$(".droppable").droppable({
drop: function(event, ui) {
ui.draggable.remove();
}
});
* {
font-size: 50px;
}
img {
width: 200px;
}
.burger {
cursor: grab;
display: inline-block;
}
.wrap {
position: relative
}
.droppable {
position: absolute;
top: 34px;
left: 125px;
display: block;
width: 40px;
height: 40px;
border: 2px solid yellow; /*remove to hide*/
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="wrap">
<div class="droppable"></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Manul_kitten.jpg">
</div>
<div class="burger">🍔</div>
<div class="burger">🍔</div>
<div class="burger">🍔</div>

Why the div that is appearing with click event dose not able to be dragged?

I am stuck on the problem where I am able to get DIV with the help of JavaScript but that does not able to drag. The code for drag is working perfectly fine but it will not work when I get the same code on click event.
I have another confusion mas well, when I refresh the page all notes that I have called with the help of JavaScript will be gone. What should I do about that as well?
JavaScript:
$(function () {
$(".draggable-js").draggable({
containment : 'parent',
handle: "p",
start: function (event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function (event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
});
$(document).ready(function() {
var wrapper = $(".wrap");
var add_button = $(".add-note");
$(add_button).click(function(e) {
e.preventDefault();
{
$(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
}
});
$(wrapper).on("click", ".delete-note", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
CSS:
.wrap {
width: 77vw;
height: 87vh;
}
#draggable{
width: 300px;
height: 300px;
position: absolute;
background: rgb(227, 250, 150);
border: none;
border-radius: 5px 5px 0px 0px;
}
#draggable p {
cursor: move;
}
#draggable-header p{
background: rgb(80, 80, 80);
height: 30px;
width: 300px;
color: white;
font-weight: 500;
padding: 5px;
border-radius: 5px 5px 0px 0px;
}
#draggable textarea{
background: transparent;
resize: none;
padding: 5px;
padding-left: 10px;
width: 300px;
height: 300px;
border: none;
font-weight: 500;
}
HTML:
<div class="wrap">
<div id="draggable" class="ui-widget-content draggable-js">
<div id="draggable-header">
<p class="ui-widget-header">Note name</p>
</div>
</div>
<div>
<textarea placeholder="Message" id="w3review" class="ui-widget-header"
name="w3review" rows="1" cols="2"></textarea>
</div>
<!-- The code is coming here perfectly but not able to drag as expected. -->
</div>

The problem is that you run the draggable event then it will only bind to those elements that exist right now.
I've made your draggable into an function and now you can run it every time you do the add click.
function r() {
$(".draggable-js:not(.ui-draggable)").draggable({
containment: 'parent',
handle: "p",
start: function(event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function(event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
};
Note
Please note that when you click on the add-note you are duplication ID, and an Id should always be unique.
Demo
function r() {
$(".draggable-js:not(.ui-draggable)").draggable({
containment: 'parent',
handle: "p",
start: function(event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function(event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
};
$(document).ready(function() {
var wrapper = $(".wrap");
var add_button = $(".add-note");
$(add_button).click(function(e) {
e.preventDefault(); {
$(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
}
r();
});
r();
$(wrapper).on("click", ".delete-note", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
.wrap {
width: 77vw;
height: 87vh;
}
#draggable {
width: 300px;
height: 300px;
position: absolute;
background: rgb(227, 250, 150);
border: none;
border-radius: 5px 5px 0px 0px;
}
#draggable p {
cursor: move;
}
#draggable-header p {
background: rgb(80, 80, 80);
height: 30px;
width: 300px;
color: white;
font-weight: 500;
padding: 5px;
border-radius: 5px 5px 0px 0px;
}
#draggable textarea {
background: transparent;
resize: none;
padding: 5px;
padding-left: 10px;
width: 300px;
height: 300px;
border: none;
font-weight: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<div class="wrap">
<div id="draggable" class="ui-widget-content draggable-js">
<div id="draggable-header">
<p class="ui-widget-header">Note name</p>
</div>
<div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div>
</div>
</div>
<button class="add-note">add-note</button>

$(document).ready(function(e) {
$(function () {
$(".draggable-js").draggable({
containment : 'parent',
handle: "p",
start: function (event, ui) {
$(this).css('background-color', 'rgb(221, 251, 120);');
},
stop: function (event, ui) {
$(this).css('background-color', 'rgb(227, 250, 150)');
}
});
$("div, p").disableSelection();
});
})
$(document).ready(function() {
var wrapper = $(".wrap");
var add_button = $(".add-note");
$(add_button).click(function(e) {
e.preventDefault();
{
$(wrapper).append('<div id="draggable" class="ui-widget-content draggable-js"><div id="draggable-header"><p class="ui-widget-header">Note name</p></div><div><textarea placeholder="Message" id="w3review" class="ui-widget-header" name="w3review" rows="1" cols="2"></textarea></div></div> '); //add new note
}
$(".draggable-js").draggable();
});
$(wrapper).on("click", ".delete-note", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
});
.wrap {
width: 77vw;
height: 87vh;
}
#draggable{
width: 300px;
height: 300px;
position: absolute;
background: rgb(227, 250, 150);
border: none;
border-radius: 5px 5px 0px 0px;
}
#draggable p {
cursor: move;
}
#draggable-header p{
background: rgb(80, 80, 80);
height: 30px;
width: 300px;
color: white;
font-weight: 500;
padding: 5px;
border-radius: 5px 5px 0px 0px;
}
#draggable textarea{
background: transparent;
resize: none;
padding: 5px;
padding-left: 10px;
width: 300px;
height: 300px;
border: none;
font-weight: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<div class="wrap">
<div id="draggable" class="ui-widget-content draggable-js">
<div id="draggable-header">
<p class="ui-widget-header">Note name</p>
</div>
</div>
<div>
<textarea placeholder="Message" id="w3review" class="ui-widget-header"
name="w3review" rows="1" cols="2"></textarea>
</div>
<!-- The code is coming here perfectly but not able to drag as expected. -->
</div>
<button class="add-note">add-note</button>
Dynamically created element cannot be draggable
you can re initialize draggable to the element newly created by JS,$(".draggable-js").draggable();
when I refresh the page all notes that I have called with the help of JavaScript will be gone.
this is because the browser won't save the temporarily created element, so as soon as make refresh the all temporary data will get erased, so you're not able to get the previous notes, refer this answer for know more about how can you achieve it.

Sortable sorting item from one sortable to another not working

I trying to move item from one Sortable list to other one but item is not move cause of parent scroll.
Below snippet example of my code.
$(".dragable .item").draggable({
revert: "invalid",
helper:'clone',
appendTo: '.main_container',
connectToSortable: '.contianer .sortable',
drag: function(event, ui) {
//cursor position adjustment
$(this).draggable('instance').offset.click = {
left: Math.floor(ui.helper.width() / 2),
top: Math.floor(ui.helper.height() / 2)
}
},
})
$('.contianer .sortable').sortable({
connectWith: ".sortable",
over: function(event, ui) {
},
});
.sortable{
background: gray;
height: 750px;
margin-bottom: 20px;
}
.dragable{
float: left;
}
.main_container,body,html{
overflow: hidden;
height: 100%;
}
.main_container{
position: absolute;
width: 100%;
}
.contianer{
overflow: auto;
width: 300px;
padding:0 5px;
height: calc(100% - 57px);
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="main_container">
<p>Item move from List 1 to List 2 is not working. List two is downside scroll</p>
<div class="contianer">
<h3>Sortable List 1</h3>
<div class="sortable1 sortable"></div>
<h3>Sortable List 2</h3>
<div class="sortable2 sortable"></div>
</div>
<div class="dragable">
<li class="item">test1</li>
<li class="item">test2</li>
<li class="item">test3</li>
</div>
</div>

jquery Drag and Drop error

i'm having a problem with my code: its supposed to have draggabillity from right to left and should be sortable in the left. so far so good.
But im encountering an error: when i drag the items from the left div, another clone appears in the screen and i can't figure it out.
i also need help for adding multiple items from right and using a counter for showing the number of the same item.
here is my code:
$(function drag() {
$(".item").draggable({
cursor: 'move',
helper: 'clone',
appendTo: '#droppable',
});
});
$(function drop() {
$("#droppable").droppable({
accept: '.item',
drop: function(event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({
helper: "clone"
});
$("#droppable").disableSelection();
});
#draggable {
width: 150px;
height: 600px;
border: 1px black hidden;
float: right;
}
.item {
width: 70px;
height: 100px;
border-radius: 10%;
margin: auto;
margin-top: 11.5%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#droppable {
width: 150px;
height: 600px;
border: 1px black solid;
float: left;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: black;
}
#div_4 {
background-color: green;
}
#div_5 {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<body>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ondrop="drop(event)">
</div>
</body>

Here you go with the solution https://jsfiddle.net/0nf83chm/1/
$( ".item" ).draggable({
cursor:'move',
helper:'clone',
appendTo:'#droppable',
});
$("#droppable").droppable({
accept: '.item',
drop:function (event, ui) {
ui.draggable.clone().appendTo($(this));
}
});
$("#droppable").sortable({helper: "clone"});
$("#droppable").disableSelection();
#draggable{width:150px; height:600px; border:1px black hidden; float:right;}
.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;}
.red{background-color:red;}
.blue{background-color:blue;}
.black{background-color:black;}
.green{background-color:green;}
.yellow{background-color:yellow;}
#droppable{width:150px; height:600px; border:1px black solid; float:left;}
#div_1{background-color:red;}
#div_2{background-color:blue;}
#div_3{background-color:black;}
#div_4{background-color:green;}
#div_5{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable">
<div id="div_1" class="item red" draggable="true">1</div>
<div id="div_2" class="item blue" draggable="true">2</div>
<div id="div_3" class="item black" draggable="true">3</div>
<div id="div_4" class="item green" draggable="true">4</div>
<div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ></div>

Other droppable divs not working like the 1st one

My 1st droppable div box is working perfectly however the rest of my droppable div boxes aren't. I've been looking through my code and couldn't figure out where the problem is.
When I drag a draggable clone element in the other divs (2,3,4) they go at the very bottom of the page and then when I click the clone it suddenly goes to the first one with out even trying to move it yet.
HELP?
THANK YOU IN ADVANCE.
$(document).ready(function() {
$("#classicTemplate").resizable();
$(".dragImgs").draggable({
helper: "clone",
snap: ".dropTarget",
appendTo: "#classicTemplate",
revert: "invalid"
});
$(".dropTarget").droppable({
accept: ".dragImgs",
hoverClass: "highlight",
drop: function(event, ui) {
var $imgClone = ui.helper.clone();
if (!$imgClone.is(".inside-dropTarget")) {
$(this).append($imgClone.addClass("inside-dropTarget").draggable({
containment: ".dropTarget",
position: "relative"
}));
$imgClone.dblclick(function() {
$imgClone.remove();
});
}
}
}).resizable({
animate: "true",
ghost: "true",
handles: "n, e, s, w, ne, se, sw, nw, all"
});
});
.container {
background-color: #bbb;
}
.imageContainer {
float: left;
margin: 10px;
width: 230px;
background-color: #fff;
}
.imageContainer img {
margin: 10px;
margin-left: 15px;
}
#classicTemplate {
list-style-type: none;
float: right;
margin-top: 10px;
background-color: #ccc;
}
#classicTemplate ul {
list-style-type: none;
padding: 0;
}
.dropTarget {
background-color: #aaa;
margin: 10px;
width: 210px;
height: 143px;
}
.dragImgs {
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="imageContainer">
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
</div>
<div id="classicTemplate">
<div class="dropTarget pull-left">
1
</div>
<div class="dropTarget pull-left">
2
</div>
<div class="dropTarget pull-left">
3
</div>
<div class="dropTarget pull-left">
4
</div>
</div>
</div>