jQueryUI Help Drag & drop Needed

JavaScript and client side scripting.

Moderator: General Moderators

jQueryUI Help Drag & drop Needed

Postby Live24x7 » Mon Jun 11, 2012 1:37 pm

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

Syntax: [ Download ] [ Hide ]

<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>

 


Here's the dragdrop.js file

Syntax: [ Download ] [ Hide ]
$(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');
                }
        });
});
 




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
Live24x7
Forum Contributor
 
Posts: 194
Joined: Sat Nov 19, 2011 10:32 am

Re: jQueryUI Help Drag & drop Needed

Postby avibitton » Wed Jul 18, 2012 5:33 pm

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!" );
}
});
});
avibitton
Forum Newbie
 
Posts: 18
Joined: Sat Jul 14, 2012 4:35 pm


Return to Javascript

Who is online

Users browsing this forum: Google [Bot] and 4 guests