PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Nov 22, 2014 11:32 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Mon Jun 11, 2012 1:37 pm 
Offline
Forum Contributor

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


Top
 Profile  
 
PostPosted: Wed Jul 18, 2012 5:33 pm 
Offline
Forum Newbie

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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group