jQuery draggable / droppable problem

Question

I can drag items without any problem unfortunately items can be dragged everywhere which I do not want. I only want items to be dragged on some specific areas such as buttonmenu. I used many methods but I have not got any result. Could you please tell me how to disable a buttonmenu which has id of 34 not to drop buttons there? You can see the code that I am using (which does not work for not droppping)

Best Regards

Altaico

Here is the code:

$("#35").draggable();
$("myArticle").droppable( "option", "disabled", true );

Answer 1

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"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
</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

Answer 2

看看你的droppable元素的accept选项 - 这允许你指定被拖动的元素在被考虑用于drop oeration之前必须具有哪些类，或者你可以用来根据其他一些来做出这个决定的函数标准。

jQuery draggable / droppable problem

Question

2 answers

solution1
2 2010-08-19 14:15:31

solution2
0 2010-08-19 13:58:41

jQuery draggable / droppable problem

Question

2 answers

solution1 2 2010-08-19 14:15:31

solution2 0 2010-08-19 13:58:41

solution1
2 2010-08-19 14:15:31

solution2
0 2010-08-19 13:58:41