jQuery Forum

Folks,

 

I am trying to drag a image (module) and place it in a slot (slot). I am having troubles getting this to work.  It used to work but no longer works.

 

Any ideas?

 

Thanks,

 

Phil

 

 

-------

 

...

 

<script type="text/javascript" src="/js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/js/jquery.ui.droppable.js"></script>

<script type="text/javascript">

 $(function() {
      $(".modules").draggable({
          helper: "clone",
          handle: "img"
       });
      $(".slots").droppable({
          accept: "#options > div",
          drop: function(event, ui) {
               $(this).html(ui.draggable.html());
          }
      })
 });

...

 

<div id="panel">
<img style="position: absolute; top: 8px;" src="/images/dnd/PS550_V2.png" class="print" />
<div id="switch" class="print">

  <div id="slot1" class="slots">
  <img src="/images/dnd/IN500.png" alt="0">
  </div>

  <div id="slot2" class="slots">
  <img src="/images/dnd/IN500.png"  alt="0">
  </div>

  <div id="slot3" class="slots">
  <img src="/images/dnd/IN500.png" alt="0">
  </div>

  <div id="slot4" class="slots">
  <img src="/images/dnd/IN500.png" alt="0">
  </div>

 </div>

 

<div id="options">

 <div style="float: top; margin-bottom: 5px;">Options:</div>

 

  <div class="modules">
  <img src="/images/dnd/IN501.png" alt="1">
  </div>

  <div class="modules">
  <img src="/images/dnd/IN502.png" alt="2">
  </div>

  <div class="modules">
  <img src="/images/dnd/IN503.png" alt="3">
  </div>

  <div class="modules">
  <img src="/images/dnd/IN504.png" alt="4">
  </div>

  <div class="modules">
  <img src="/images/dnd/IN505.png" alt="5">
  </div>

  <div class="modules">
  <img src="/images/dnd/IN500.png" alt="0">
  </div>

 

 </div>

 

</div>

 

</div>

 

I noticed that my drag and drop routines are not working in IE9. They worked fine in Firefox.

 

I upgraded the JQuery to 1.7.2 (UI 1.8.20) and now nothing works. It looks like everything should work but even simple dragging does not work.

 

http://www.presentationswitchers.com/products/series500/dnd/designtool.php?encl=PS550  then view source.

 

Application is a simple drag items from "Option" area and drop onto plates above.

 

Any ideas?

 

Phil