How removing dragged element only if it has a certain class? - javascript

I want to remove a dragged element, but it should only be removed when it doesn't have the class "nodrop".
here's my current code it removes all elements wheter i included an if function:
$(".löschen").droppable({
drop: function(event, ui) {
if (!$(this).hasClass("nodrop")){
ui.draggable.remove();
findTotal();
}
}});
I don't have any plan what I've done wrong...

You get the current drop container (.löschen) with $(this). With $(ui.draggable) you get the dropped element with class nodrop.
$(".draggable").draggable();
$(".löschen").droppable({
drop: function(event, ui) {
var $dropContainer = $(this);
var $dragContainer = $(ui.draggable)
console.log($dropContainer, $dragContainer);
if (!$dragContainer.hasClass("nodrop")){
$dragContainer.remove();
}
}});
.draggable {
width: 100px;
height: 100px;
}
.drop {
background-color: green;
}
.nodrop {
background-color: red;
}
.löschen {
width: 200px;
height: 200px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable nodrop">NO DROP</div>
<div class="draggable drop">DROP</div>
<div class="löschen">TRASH</div>

Related

Jquery: How to hide an element while it is in orther element?

how to hide a "cube-2" by click on "click-me" that its included by "cube-2"?
I made an event but it deleted all of my cube-2, I want to hide cube-2 one by one. Anyone can solve this? please help me.
$('.cube-1').click(function name(params) {
$('.cube-1').append('<div class="cube-2"><div class="click-me">click me to hide this cube</div></div>');
// how to add event click on "click-me" to hide "cube-2"??
})
.cube-1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.cube-2 {
margin-left: 100px;
width: 100px;
height: 100px;
float: left;
background: red;
}
.click-me {
width: 100%;
height: 50px;
background: white;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<div class="cube-1"></div>
</html>
You can add an id to your cube-2 div and it's corresponding click-me anchor tag and remove only the div with that Id.
You may also want to check Template string
$('.cube-1').click(function name(e) {
var cubeCounter = 1;
if (e.target.className == "cube-1") {
$('.cube-1').append(`<div class=cube-2 id=cube-${cubeCounter}><div class=click-me id=${cubeCounter}>click me to hide this cube</div></div>`);
cubeCounter++;
}
})
$(document).on('click', '.click-me', function name(e) {
var cubeId = e.target.id;
$(`#cube-${cubeId}`).remove();
})
you need to handle dyanamic click event of second cube and prevent click event of parent control, when child cube is clicked
$('.cube-1').click(function name(e) {
if(e.target.className == "cube-1")
{
$('.cube-1').append('<div class="cube-2"><div class="click-me">click me to
hide this cube</div></div>');
}
});
$(document).on('click','.cube-2',function name(e)
{
$(this).remove();
// how to add event click on "click-me" to hide "cube-2"??
})
Please check working demo [Link]
https://jsfiddle.net/2L3k5hcb/
You just need to bind your click on div while you appending your cube-2.
Add your script as below-
$('.cube-1').on('click',function(event){
$('.cube-1').append('click me to hide this cube');
})
function myFunction(param) {
event.stopPropagation();
$(param).remove();
}
you can use below method for dynamicly generated elements.
$(document).on('click', '.click-me', function (e) {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Try this
$(document.body).on('click', '.cube-2', function (event) {
$(this).hide();
});
$('.cube-1').click(function(event) {
if(event.target.className =='cube-1')
$('.cube-1').append('<div class="cube-2"><div class="click-me">click me to hide this cube</div></div>');
// how to add event click on "click-me" to hide "cube-2"??
})
.cube-1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.cube-2 {
margin-left: 100px;
width: 100px;
height: 100px;
float: left;
background: red;
}
.click-me {
width: 100%;
height: 50px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cube-1"></div>

Drag and Drop from image onto another image

I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image.
Javascript:
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
} else {
alert(image + " not dropped.");
}
}
});
$("#briefcase").droppable({
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {
$("#briefcase").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase").append(ui.draggable);
}
});
});
HTML:
<div id="dragIcons">
<img src="assets/img/gebiz.png">
<img src="assets/img/b2b.png">
</div>
<div id="briefcase">
<img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>
CSS:
.draggable {
filter: alpha(opacity=100);
opacity: 1.0;
}
.dropped {
position: static !important;
}
#dragIcons {
border: 2px solid #ccc;
padding: 5px;
min-height: 100px;
width: 430px;
}
#briefcase {
border: 5px solid #ccc;
padding: 5px;
height: auto;
width: 600px;
margin-left: auto;
margin-right: auto;
}
Remove the <img> tag in the #briefcase div. Instead, make the background of the div as the image and make its position absolute.
Here's the JSFiddle - you'll have to fix the CSS positioning of the icons, but the main idea is there.

how to get class of a dragged item after been received by the target sortable?

$(".target").droppable({
connectWith: ".connected",
drop: function (event, ui) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if ($(this).hasClass("source connected")) {
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
i've tried ui.item and ui.draggable, but no success
PS: Newbie :)
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
connectWith: ".connected",
drop: function( event, ui ) {
var targetId = event.target.id;//--> id of the target (where elements will be dropped into)
var orderId;//--> id of the dragged element (NOT the targetId)
if (ui.draggable.hasClass("connected")) {
console.log("ok");
orderId = sourceElementSo;
}
else {
orderId = $(ui.draggable).attr("id");
};
}
});
});
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content connected">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

Moving elements between 2 boxes

I have looked through same questions on this topic but somehow suggested solutions do not work for me :/
Problem is that divs get moved from #box1 to #box2 only once. If detach() used then divs are clickable in #box2 but get rearranged when clicked. If remove()used divs are not clickable in #box2 at all (event listener gone?). I have a feeling that the process of moving the divs is somehow not really complete and I ether have duplicates around in DOM or moved divs disappear entirely and do not react to clicks.
I tried detach(), remove() and appendTo() in various combinations and the best I can get is in the fiddle below
http://jsfiddle.net/uoz3t914/13/
$('#box1 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).remove().appendTo('#box2');
});
$('#box2 .item' ).on('click', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
In your case you have to use the Event Delegation
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
You attach the event to the parent, that propagate it to the children, and then any time that you attach the event, put an off() to detach it.
$('#box1' ).off().on('click','.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box2');
});
$('#box2' ).off().on('click', '.item', function() {
// $( this ).detach().appendTo('#box2'); moves divs around in #box2
$( this ).appendTo('#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2{
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="box1">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2">
</div>
You can move them between the boxes with:
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
$('#box1, #box2').on('click', '.item', function () {
$(this).appendTo($(this).parent().prop('id') == 'box1' ? '#box2' : '#box1');
});
.item {
width: 50px;
height: 50px;
float: left;
}
#box1 {
border: 1px dotted blue;
position: relative;
width: 200px;
height: 100px;
}
#i1 {
background-color: yellow;
}
#i2 {
background-color: green;
}
#i3 {
background-color: red;
}
#box2 {
border: 1px solid black;
width: 250px;
height: 100px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1">
<div class="item" id="i1"></div>
<div class="item" id="i2"></div>
<div class="item" id="i3"></div>
</div>
<div id="box2"></div>
This uses .on()'s event delegation syntax to handle the elements, and a ternary operator to determine which box the element exists in.
Use this html:
<div id="wrapper">
<div id ="box1" class="container">
<div class ="item" id ="i1"></div>
<div class ="item" id ="i2"></div>
<div class ="item" id ="i3"></div>
</div>
<div id = "box2" class="container">
</div>
</div>
and this javascript
$('.item').on('click', function(){
var index = $("#wrapper > .container").index($(this).parent()),
maxIndex = $('#wrapper > .container').length,
nextIndex = (index + 1) < maxIndex ? (index + 1) : 0;
$(this).appendTo($('#wrapper > .container').eq(nextIndex));
});
in your fiddle to move boxes between any number of containers
You may also add Box3, Box4 (with class .container) etc. into the "#wrapper div", you may do it dynamycally

Droppable doesn't fire after changing divs

I'm trying to simulate an animate effect via jQuery that consists drag and drop as events to be fired. The code I use seems to be fine until the point when I have to swap divs by setting their display to none/block. Whenever I swap to the first div it perfectly executes the animation but when it gets on the 2nd div (after swapped) it doesn't fire the droppable event. I chose to have id selectors for the respective divs to instance the container of the droppable event hence to animate. I'm stuck and are out of any solution after searching numerous results so far. Thank you in advance. Here is my JS fiddle I prepared to easily understand my problem.
<html>
<head>
<style>
#wrapper {
border: 1px solid gray;
height:300px;
margin: 0 auto;
padding: 20px 20px 20px 20px;
position:relative;
text-align:center;
width:600px;
}
p {
display:inline;
font-family:Calibri;
font-size:20px;
color: #0b1207;
text-shadow: #63c9b8 0px 10px 10px;
}
#div1, #div2 {
border: 1px dotted green;
bottom:0;
margin-left:100px;
position: absolute;
}
#div1 {
background-color: orange;
height:200px;
width:300px;
}
#div2 {
background-color: green;
display:none;
height:100px;
width:300px;
}
#btnchange {
background-color:black;
border-radius:10px;
color: #fff;
height:35px;
margin-top:10px;
margin-left:100px;
position:absolute;
width:80px;
}
.example {
border: 1px solid red;
background-color: blue;
height:75px;
margin: 5px auto 0 ;
width:75px;
}
</style>
</head>
<body>
<div id='wrapper'>
<p></p>
<div id='div1'></div>
<div id='div2'></div>
</div>
<button id ='btnchange' type='button'>Change</button>
<div class='example'></div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
<script type="text/javascript">
var id = 1;
var parent = document.getElementById('wrapper');
var makina = parent.children[id].id;
$(function(){
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$('.example').draggable({
containtment: "#" + makina,
cursor: "pointer",
revert: true
});
$('#btnchange').click(function(){
if (id == 1)
{
document.getElementById(makina).style.display = 'none';
id = 2;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
else
{
document.getElementById(makina).style.display = 'none';
id = 1;
makina = parent.children[id].id;
document.getElementById(makina).style.display = 'block';
document.getElementById('wrapper').children[0].innerText = makina;
}
console.log(makina);
});
$("#" + makina).droppable({
drop: function(){
doAnimate(makina);}
});
});
function doAnimate(container)
{
$('#'+ container).animate({height: '+=10px'}, 500, function(){
var message = container.clientHeight;
$(this).html(message);
});
}
</script>
</body>
</html>
http://jsfiddle.net/xoxxbr4t/6/
Your problem is you were only calling droppable once, on only one of the items. Once the .droppable() function is also put inside the change button click, it should work.
put this inside change function:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
example:
http://jsfiddle.net/xoxxbr4t/7/
You aren't binding droppable to your second element. You call this function once:
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
Since your "makina" at this point is div1, that's the only thing that gets bound. I made that it's own function:
function setDroppable(makina) {
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
}
And then called it for both divs in your setup:
setDroppable('div1');
setDroppable('div2');
And now it works fine. Here's the updated fiddle
Thanks Michal indeed that was the answer but I think a good programmer would reduce the redundant snippet of code as far as I can tell those are duplicate lines from the $(document).ready() function. However it's a solution. And right after I read your post I decided to post the answer myself as it follows:
//Previous
$("#" + makina).droppable({
drop: function () {
doAnimate(makina);
}
});
//Current
$("#wrapper").droppable({
drop: function () {
doAnimate(makina);
}
});
Since I'm using nested divs I then realised that I could make the parent div droppable and just animate the child which is active(shown).

Categories

Resources