ansaurus

Question

Answer 1

A:

Have a look at the accept option for your droppable element - this allows you to either specify which classes the dragged element must have before it will be consider for a drop oeration, or a function which you can use to make this decision based on some other criteria.

belugabob 2010-08-19 13:58:41

I can only drag my buttons but I am not able to drop it anywhere after I use that code. I will be so glad if you can help me about that issue. Cheers. Altaico [code]$().ready(function() { $("#technologyBtn").draggable({revert: "invalid"});$("#myArticle").droppable( "option", "disabled",false );$("#techBtnMenu").droppable( "option", "disabled", false ); alert("end"); });[/code]

alper 2010-08-20 07:47:18

When you say you can't drop it, what behaviour are you expecting to see when your let go of the mouse button?

belugabob 2010-08-20 15:26:24

Answer 2

A:

You want to set the revert: invalid option on the draggable object which will caused it to snap back if it is dropped onto anything not marked as droppable, so try:

$("#35").draggable({revert: "invalid"}));
$("myArticle").droppable( "option", "disabled", true );
$("#36").droppable( "option", "disabled", false );

This means you'd be able to drag 35 onto 36 but not onto myarticle.

Below is the full page html:

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"&gt;&lt;/script&gt;
</head>    
<body>
  <script type="text/javascript">
    $().ready(function() {
      $("#35").draggable({revert: "invalid"});
      $("#36").droppable({disabled: false });
    });
  </script>
  <div id="34" style="width:100px; height:100px; background-color:red;"> 
    </div>
  <div id="35" style="width:100px; height:100px; background-color:yellow;" >
     </div>
  <div id="36" style="width:300px; height:300px; border:solid blue 1px;">
    drop me here
  </div>
</body>

This renders 2 coloured blocks (the divs). You can drag the yellow one (id 35) and drop it only in the square labelled "drop me here". If you wanted to drop it anywhere else, you'd have to decorate that area with droppable

Hope this helps

JonNeale 2010-08-19 14:15:31

JonNealeI am not able to drop my button after I use your code. I am able to drag it but I cannot drop it anywhere. I will be glad if you can help me about that...I am looking for your helps. cheers.

alper 2010-08-20 07:46:38

I fixed a bug in the html demo listed above which would cause the div to be draggable but not droppable. Basically there needed to be something in the div. Can you confirm that the demo html, does what you want it to do? Playing with the demo, I can pick up div 35 and drop it only in div 36

JonNeale 2010-08-21 06:59:44

Answer 3

A:

JonNeale

$("#35").draggable({revert: "invalid"}); $("#myArticle").droppable( "option", "disabled", true ); $("#54").droppable( "option", "disabled", false );

This time I am not able to drop button 35. I can drag it but I cant drop it anywhere such I wanted to drop it on buttonmenu called 54. How I can drop it only buttonmenu 54?

alper 2010-08-19 14:45:59

ansaurus

tags:

views:

answers:

jQuery draggable / droppable problem

related questions