Hello I am new to Javascript.
I came across a tutorial that creates a simple drag and drop with jQuery UI like this:
(the demo : http://www.ericbieller.com/examples/dragdrop/ )
Here's the HTML element
[text]
<head>
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script> <!-- this includes core ui & drag and drop interactions -->
<script type="text/javascript" src="js/dragdrop.js"></script> <!-- this includes the our code for drag and drop elements -->
</head>
<body>
<div id="trash" class="out">
<span>Trash</span>
</div>
<div id="items">
<div class="item"><span>Item 1</span></div>
<div class="item"><span>Item 2</span></div>
<div class="item"><span>Item 3</span></div>
</div>
</body>
[/text]
Here's the dragdrop.js file
[text]$(function() {
$(".item").draggable({
revert: true
});
$("#trash").droppable({
over: function() {
$(this).css('backgroundColor', '#cedae3');
},
out: function() {
$(this).css('backgroundColor', '#a6bcce');
},
drop: function() {
var answer = confirm('Permantly delete this item?');
$(this).removeClass('over').addClass('out');
}
});
});
[/text]
Now My Question:
Is it possible to make an element both draggable and droppable at the same time?
I am trying to emulate two boxes - so that items from any box can be dropped into another box - so for example:
if BOX A has a value of 3 and BOX B has a value of 5 -
dragging BOX A into BOX B should fill Box B with value 8 and box A gets the new value 0.
similarly dragiing BOX B into BOX A should make the new value of Box A as 8 items and box B would have 0 items left.
Thanks for the help
jQueryUI Help Drag & drop Needed
Moderator: General Moderators
Re: jQueryUI Help Drag & drop Needed
yes it possible just treid it now , i mean to make object draggable and droppable at same time .
example code:
$(function() {
$( "#draggable,#droppable" ).draggable();
$( "#droppable,#draggable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
example code:
$(function() {
$( "#draggable,#droppable" ).draggable();
$( "#droppable,#draggable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});