jQueryUI Multiple droppable elements - javascript

How come when I drag my draggable div to droppable1 div it always gets placed in droppable2 div.
In addition I followed the jQuery UI snap-back option but it does not work. How could I make it that instead of dragging the actual draggable element it drags an instance/copy of it and have droppable accept multiple of these draggable elements.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( '#draggable' ).draggable();
$( '#droppable1' ).droppable({
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});
$( '#droppable2' ).droppable({
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});
});
</script>
<div class="well">
<div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>

You can use the accept filter to accept specific items in specifc droppable area.
$( '#droppable1' ).droppable({
accept: '#draggable',
drop: function(event, ui)
{
$(this)
.append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
}
});

You can use a clone helper for the draggable option, than in the drop event clone and append the dropped helper.
Code:
$(function () {
$('#draggable').draggable({
helper: 'clone'
});
$('#droppable1, #droppable2').droppable({
drop: function (event, ui) {
$(this)
.append(ui.helper.clone(false).css({
position: 'relative',
left: '0px',
top: '0px'
}));
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/v3L7A/

Related

dragging li from one ul to another ul

I'm trying to move a <li> from one <ul> to another <ul> using jquery-ui draggable and droppable.
Currently I have
HTML
<div>
<h4><span>basket</span></h4>
<ul id="basket" class="basket">
<!-- items -->
<li id="test1">test1</li>
<li id="test2">test2</li>
</ul>
</div>
<div>
<h4><span>courses</span></h4>
<ul id="courses" class="courses">
<!-- items -->
</ul>
</div>
JS
$("#test1").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#test2").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#basket").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
basketCourse(ui.draggable);
}
});
$("#courses").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
courseCourse(ui.draggable);
}
});
function basketCourse(item){
console.log("added course to basket");
}
function courseCourse(item){
console.log("added course to courses");
}
How do I move test1 and test2 from the basket and to the courses?
Right now I can drag #test1 and #test2 around inside the basket, and it will run basketCourse(), but it never seems to be able to allow me to drop either of them inside courses.
I am using bootstrap, jquery and jquery-ui..
Your list doesn't have enough height to drop there items, just set min-height: 100px or whatever you want, and you'll be able to drop items there - https://jsfiddle.net/825pqyz8/

Jquery, draggable div is not automatically resizing with accordion inside using Firefox

I have a jquery accordion inside a draggable div. Once the div has been dragged it becomes a fixed height and doesn't react to the accordion as expected. Any advice?
You can see it not working at http://addresslabels.tk/templates just select the 14 per sheet template and it's the menu on the left.
$(function() {
$( ".draggable" ).draggable();
});
$(function() {
$( ".closedaccordion" ).accordion({
collapsible: true,
active: false
});
$( ".openaccordion" ).accordion({
collapsible: true,
});
Css:
#printmenu {
position:fixed;
width: 235px;
height: auto;
padding: 10px;
border-radius: 5px;
}
html
<div id="printmenu" class="jsonly ui-widget-content draggable">
<div class="closedaccordion">
<h3>Accordion</h3>
<p>content</p>
</div>
</div>
The answer shown in the duplicate question doesn't work for me so I have to add this question!
I used this javascript to fix this problem happening in firefox -
$("#printmenu").draggable({ handle: "#printmenutitle" });
$( ".closedaccordion" ).accordion({ collapsible: true, active: false });
$( ".openaccordion" ).accordion({ collapsible: true, });
$('#printmenutitle') .bind('mouseup', function(){
document.getElementById('printmenu').style.height = 'auto';
});
It looks glitchy because it isn't animated, but adding $('#printmenu').css('height', 'auto') to the activate event of the accordian does resize the box properly:
$(function () {
$(".draggable").draggable();
$(".closedaccordion").accordion({
activate: function () {
$('#printmenu').css('height', 'auto');
},
collapsible: true,
active: false
});
$(".openaccordion").accordion({
collapsible: true
});
});

Jquery Drag and Drop: Drop on the background image

I want drag the panel menu items But here items is drag.
How to drop on the above background image....
$(".drag-images").draggable({
revert: 'invalid',
containment: "#panel-03, #drop",
stop: function() { $(this).draggable('option','revert','invalid');}
});
$("#panel-03 img" ).draggable({ stack: "#panel-03 img" });
$("#drop").droppable({
greddy: true,
tolerance: 'touch',
drop: function(event,ui){
ui.draggable.draggable('option','revert','true');
}
});
Fiddle
You are missing some script.
Please add this script to your html and try
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Also from your css
#panel-03{
// remove all overflows hidden
}
remove the overflows and the issue with the image not showing will be fixed as well.
Hope this helps..

drag and drop issue jquery

I have the code below using the script i am making stuff draggable and droppable. currently i have two pieces for draggable content, and two place they can be dropped if correct then the system will change and say correct, I would like to know if there is away that i would be able just create the HTML divs and the code runs through and matches the draggable to the dropable. I have people that have a non-technical backdround, have basic HTML knowledge so thy now how to add divs and remove them but they are able to deal with script, i would like to know, if i had ID of 1-10 for the draggable content and the same for the dropable 1-10 so id 1 draggable can only be added to id one droppable.
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="hhtps:/resources/demos/style.css">
<style>
#droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable, #draggable2" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
$( "#droppable2" ).droppable({
accept: "#draggable2",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
});
</script>
<div id="draggable2" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>
You will need to avoid using HTML id for this and start using classes. Here is how to do that, with a working example:
Your HTML:
<div id="draggable_2" class="ui-widget-content draggable-item">
<p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
<p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
<p></p>
</div>
Your javascript:
$(function () {
$(".draggable-item").draggable();
$('.droppable-item').each(function (i, ele) {
// Gets the accepted from the HTML property "data-accept"
var accept = $(this).data('accept');
// This is just to show what the item accepts. you can remove it.
$(this).find('p').text('accepts: ' + accept);
// Init the jQuery UI droppable()
$(this).droppable({
accept: accept,
drop: function (event, ui) {
$(this)
.removeClass("ui-widget-header")
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
},
out: function (event, ui) {
$(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
.find("p")
.html("accept: " + accept);
}
});
});
});
If I understand your question correctly, you want every draggable to be droppable only its droppable and no other droppable div.
You've already achieved this by adding the accept: "#draggable" in your code for every droppable.
You can add this extra line of code so that if your draggable is dropped anywhere other than its droppable, it will go back to its droppable.
$( "#draggable, #draggable2" ).draggable({ revert: "invalid" });
This code can be shortened if you added the same class (like class=draggables to every draggable html element and then you can juse use
$( ".draggables" ).draggable({ revert: "invalid" }); to mark them all.
Here is a jsfiddle to show the example.

disable sortable or dragging with jquery ui

I have a div inside a div that I don't want to be able to drag around as it is a navigation element.
example:
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
<div id="container">
<div class="move">drag me around</div>
<div class="nav">Don't move me</div>
</div>
Basically the .nav I don't want to be able to drag I tried this but it didn't work
$( "#sortable1" ).sortable({
items: "li:not(.ui-state-disabled)"
});
Just filter out the item you don't want to be sortable:
$('#container').sortable({
items: 'div:not(.nav)'
});
Your current filter is acting on li elements, you're using div elements.

Categories