PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
It is currently Wed Dec 02, 2015 1:55 am

All times are UTC - 5 hours

Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Mon Jun 11, 2012 1:37 pm 
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 : )

Here's the HTML element

Syntax: [ Download ] [ Hide ]

      <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 -->
 <div id="trash" class="out">
        <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>



Here's the dragdrop.js file

Syntax: [ Download ] [ Hide ]
$(function() {
                revert: true
                over: function() {
                       $(this).css('backgroundColor', '#cedae3');
                out: function() {
                        $(this).css('backgroundColor', '#a6bcce');
                drop: function() {
                        var answer = confirm('Permantly delete this item?');

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

PostPosted: Wed Jul 18, 2012 5:33 pm 
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!" );

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