selectable with dropable

Question

0.00/5 (No votes)

See more:

, +

Hello frnds,

I have a screen with contain 9 div grid.

And another one is a single div which can drag and drop on one of div of grid

Now the requirement has change ,

Now i want to drop dragable div to multiple div of grid

Now my question is how can i drop on multiple div

Thanks.

Posted 25-Dec-13 5:12am

ExpertITM

Add a Solution

Comments

Peter Leow 25-Dec-13 11:36am

Do you mean to drag and drop a copy of that single div into one or more of the 9-div grid while that original single div stays as it is?

ExpertITM 25-Dec-13 23:32pm

No, The dragable div will be as of dropable number of div

Peter Leow 26-Dec-13 0:22am

So you want to drag and drop that div to all the other 9 divs all at once, right? See my amended solution.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ganesh KP · Answer 1 · 2013-12-25T05:58:00

try this solution given in this link as it is not fully customized to your needs but some how might be helpful to some extent
http://www.jeasyui.com/tutorial/dd/dnd1.php[^]

or this link also might helps you http://stackoverflow.com/questions/18204135/create-nested-drag-and-drop-divs-with-jquery-ui[^]

and this is similar requirement as like your http://forum.jquery.com/topic/drag-and-drop-one-div-to-many-divs[^]

u need to go thru all the links and have to do a little work around to make things work for you.

Peter Leow · Answer 2 · 2013-12-25T06:58:00

Now, it is clearer, So you want to drag and drop a div to all the other 9 divs all at once, right? Try the following demo code and adapt:

XML

<!doctype html>
<head>
<title>jQuery Drag and Clone</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(document).ready(function(){

    $("#draggable").draggable({helper:'clone'});

    $(".dropsite").droppable({
            accept: "#draggable",
            drop: function(event,ui){
            $(this).children().append($(ui.draggable).clone());
            $("#draggable").remove();
            }
    });
});
</script>
</head>
<body>
<div id="draggable" style="width:150px; height:150px; background-color:#0000ff; color:white;">Drag a Copy</div>

<div class="dropsite">
   <div style="width:150px; height:150px; background-color:#333333; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#bbbbbb; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#333333; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#bbbbbb; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#333333; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#bbbbbb; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#333333; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#bbbbbb; color:white;"></div>

   <div style="width:150px; height:150px; background-color:#333333; color:white;"></div>
</div>
</body>
</html>

The idea here is to clone the draggable div, drop it into all the children divs in dropsite, lastly remove the draggable div.

selectable with dropable

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0