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>
Related
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>
In the following code, clicking the button dynamically adds a droppable area. However the drag and drop doesn't work on the dynamically added droppable area. It works on the pre-build droppable area as you can see in the following code.
How can I fix that?
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "invalid",
});
$(".droppable").droppable({
accept: ".draggable",
hoverClass: "droppable",
drop: function( event, ui ) {
$( this )
.addClass( "droppable" )
.html( "Dropped!" );
}
});
$('button').on('click', function(e){
$('.droppables').append('<div class="droppable ui-droppable">Drop</div>');
});
body {
padding: 20px;
font-family: Helvetica;
}
.draggables,
.droppables{
overflow: hidden;
margin-bottom: 30px;
}
.draggable,
.droppable{
width: 100px;
height: 100px;
background: #74B9FF;
float: left;
margin-right: 10px;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
cursor: move;
}
.droppable {
background: #FFEAA7;
}
<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"></script>
<div class="draggables">
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
</div>
<div class="droppables">
<div class="droppable">Drop</div>
</div>
<button>Add droppable</button>
You need to instantiate droppable() on every new div you add to the DOM:
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
revert: "invalid",
});
let droppableDefaultSettings = {
accept: ".draggable",
hoverClass: "droppable",
drop: function(event, ui) {
$(this).addClass("droppable").html("Dropped!");
}
}
$(".droppable").droppable(droppableDefaultSettings);
$('button').on('click', function(e) {
$('<div class="droppable ui-droppable">Drop</div>').appendTo('.droppables').droppable(droppableDefaultSettings);
});
body {
padding: 20px;
font-family: Helvetica;
}
.draggables,
.droppables {
overflow: hidden;
margin-bottom: 30px;
}
.draggable,
.droppable {
width: 100px;
height: 100px;
background: #74B9FF;
float: left;
margin-right: 10px;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
cursor: move;
}
.droppable {
background: #FFEAA7;
}
<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"></script>
<div class="draggables">
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
<div class="draggable">Drag me</div>
</div>
<div class="droppables">
<div class="droppable">Drop</div>
</div>
<button>Add droppable</button>
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>
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
I have four draggable elements and a droppable area currently looking like this (Fiddle) and I would like to improve the experience by adding the following functions:
1) on start: display an alternative element as soon as it is out of its initial position.
2) on drop: draggable element fade away when it is dropped onto droppable container (e.g. ".frame").
What is the best way to do this?
Thanks, any help would be greatly appreciated!
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable-1") {
$(this).css('background-color', '#f1c40f');
} else if (currentId == "draggable-2") {
$(this).css('background-color', '#e74c3c');
} else if (currentId == "draggable-3") {
$(this).css('background-color', '#3498db');
} else if (currentId == "draggable-4") {
$(this).css('background-color', '#9b59b6');
}
}
});
});
<div class="container-fluid text-center">
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<ul class="list-unstyled">
<li id="draggable-1" class="frame_type color-1"></li>
<li id="draggable-2" class="frame_type color-2"></li>
<li id="draggable-3" class="frame_type color-3"></li>
<li id="draggable-4" class="frame_type color-4"></li>
</ul>
</div>
</div>
</div>
</div>
<li/> elements are now shadows of their containing draggable div elements and tweaked styles to overlap them
jQuery .hide() is used to remove them on drag complete
I've also simplified the JS a lot. Basically you have a reference to the element all the time, so don't need to match on ID or search for it.
The CSS could use some love as I haven't spent too long on it. The widths are smaller than in your sample.
http://jsfiddle.net/pratik136/L3abroyy/10/
$(document).ready(function() {
$("[id*=draggable]").draggable({
containment: "#area51",
revert: true,
stack: ".frame_type"
});
$(".frame").droppable({
hoverClass: "ui-state-active",
drop: function(event, ui) {
var elem = ui.draggable;
$(this).css('background-color', elem.css('background-color'));
$(elem.parent()).hide('slow');
}
});
});
/* General Styles */
* {
box-sizing: border-box;
}
html,
body {
background-color: #eee;
color: #666;
}
.showroom {
border: 1px solid #e1e1e1;
border-radius: 5px;
height: 500px;
padding: 100px;
}
.frame {
background-color: #fff;
height: 300px;
width: 300px;
padding: 50px;
border-radius: 5px;
}
.display {
border-radius: 5px;
height: 200px;
width: 200px;
background-color: #fff;
}
.selection {
border-radius: 5px;
height: 500px;
}
.frame_type {
height: 50px;
width: 100%;
border-radius: 5px;
}
li {
height: 50px;
width: 30%;
border-radius: 5px;
}
.color-1,
.color-1 div {
background-color: #f1c40f;
}
.color-2,
.color-2 div {
background-color: #e74c3c;
}
.color-3,
.color-3 div {
background-color: #3498db;
}
.color-4,
.color-4 div {
background-color: #9b59b6;
}
.ui-state-active {
background-color: #e1e1e1 !important;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<h1>Paintings & Frames: Interactive App</h1>
<div class="row" id="area51">
<div class="col-xs-8">
<div class="showroom">
<div class="frame">
<img class="display" src="http://placehold.it/200" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="selection text-center">
<h3>Draggable Frames</h3>
<ul class="list-unstyled">
<li class="color-1">
<div id="draggable-1" class="frame_type"></div>
</li>
<li class="color-2">
<div id="draggable-2" class="frame_type"></div>
</li>
<li class="color-3">
<div id="draggable-3" class="frame_type"></div>
</li>
<li class="color-4">
<div id="draggable-4" class="frame_type"></div>
</li>
</ul>
</div>
</div>
</div>
</div>