1. Zuhause
  2. Frage und Antwort
  3. jQuery UI Droppable - Wie ändert man den HTML-Code?

jQuery UI Droppable - Wie ändert man den HTML-Code?

2012-03-30 6 views
4

Mit der Dropable-Funktion von jQuery UI habe ich ein Shelf-Type-Thing erstellt, bei dem die enthaltenen Objekte verschoben werden können. Hier ist der Code: http://jsfiddle.net/JoeyMorani/7LWj4/jQuery UI Droppable - Wie ändert man den HTML-Code?

Ist es möglich, die HTML des Regals tatsächlich zu ändern, wenn die .boxArt 'divs verschoben werden, werden sie auch in dem HTML verschoben. Im Moment scheint es nur die Position des Divs zu verändern und es nicht wirklich zu bewegen.

Ich möchte dies tun, damit ich erkennen kann, wo die divs sind. (Was ihre Eltern div ist)

Danke für die Hilfe! :)

Quelle

2012-03-30 Joey Morani

Antwort

4

Ich habe einige Änderungen an der HTML und CSS von Ihrer Demo gemacht, aber ich habe etwas zu arbeiten. Der HTML-Code ist einfacher und hat das Ergebnis nicht beeinflusst. Wenn Sie jedoch das vorherige Layout benötigen, ist meine Antwort möglicherweise nicht ganz richtig für Sie.

Der vollständige Code wird unten sowie in einer jsFddle demo dupliziert. Der Code wird tatsächlich viel einfacher, nachdem er die .boxArt löscht und in das DOM verschiebt, da die Animation nur die oben und auf 0 zurückgehen muss. Der einzige schwierige Teil war die Berechnung der korrekten Position, um die .boxArt einzustellen vor dem Animieren. Dies liegt daran, dass das ziehbare Objekt relativ in dem Element positioniert ist, aus dem es gezogen wurde. Sobald es im DOM verschoben wird, ist diese Position nun völlig falsch. Also funktioniert der Code und setzt die ziehbare relative Position zuerst auf das neue Elternelement (nachdem er in das DOM verschoben wurde) und animiert dann wieder auf top:0,left:0.

Dies funktioniert für mich in Chrome, aber ich habe nicht in anderen Browsern getestet. console.log ging rein, um zu zeigen, was vor sich geht.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>title</title> 
    <style type="text/css"> 
     .shelfRow { 
     width:1865px; 
     height:280px; 
     } 
     #shelves { 
     position:relative; 
     width:950px; 
     height:566px; 
     background:#CCC; 
     border:1px solid #333; 
     overflow-y:hidden; 
     overflow-x:auto; 
     } 
     .drop { 
     width:155px; 
     height:200px; 
     padding:2px; 
     margin-top:30px; 
     margin-left:25px; 
     float:left; 
     position:relative; 
     } 
     .dropHover { 
     padding:0px; 
     border:2px solid #0C5F8B; 
     -webkit-box-shadow: 0 0 3px 1px #0C5F8B; 
     box-shadow: 0 0 3px 1px #0C5F8B; 
     -moz-box-shadow: 0 0 20px #0C5F8B; 
     } 
     .boxArt { 
     width:155px; 
     height:200px; 
     -webkit-box-shadow: 0 0 8px 1px #1F1F1F; 
     box-shadow: 0 0 8px 1px #1F1F1F; 
     -moz-box-shadow: 0 0 20px #1F1F1F; 
     color:#000; 
     background:#FFF; 
     } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var shelfOffset = $('#shelves').offset(); 
      var dropMarginTop = parseInt($('.drop').css('marginTop')); 
      var dropMarginLeft = parseInt($('.drop').css('marginLeft')); 

      $('.drop').droppable({ 
       accept: function(el) { 
       return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt'); 
       }, 
       tolerance: 'intersect', 
       hoverClass: 'dropHover', 
       drop: function(event, ui) { 
       ui.draggable.detach().appendTo($(this)); 

       var originalOffset = ui.draggable.data('originalOffset'); 
       console.log('originalOffset', originalOffset.top, originalOffset.left); 

       var boxArt = $(this).children('div'); 
       var boxPosition = boxArt.position(); 
       console.log('boxArt position', boxPosition.top, boxPosition.left); 

       var container = $(this); 
       var containerPosition = container.position(); 
       console.log(container, containerPosition.top, containerPosition.left); 

       var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop; 
       var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft; 

       console.log('new offset', newTop, newLeft); 
       boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0}); 
       } 
      }); 

      $('.boxArt').draggable({ 
      start: function(event, ui) { 
       $(this).data('originalOffset', ui.offset); 
      }, 
      revert: 'invalid' 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="shelves"> 
     <div class="shelfRow"> 
     <div class="drop"></div> 
     <div class="drop"><div class="boxArt" id="boxArt2">2</div></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div id="drop15"></div> 
     </div> 
     <div class="shelfRow"> 
     <div class="drop"><div class="boxArt" id="boxArt1">1</div></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     <div class="drop"></div> 
     </div> 
    </div> 
    </body> 
</html>

Quelle

2012-03-31 14:12:06 andyb

+0

Vielen Dank! Funktioniert super. : D Es beseitigt auch die Notwendigkeit dieser Überlappungsfunktion, das ist ein zusätzlicher Bonus. Danke noch einmal! :) –

+0

Ja die Droppable _accept_ Funktion (die ich tatsächlich vergessen habe und musste bei der Entwicklung der Antwort nachsehen!) Kümmert sich um was Ihre _overlap_ Funktion tut. Freue mich zu helfen :) – andyb

 Verwandte Themen

  • Keine verwandten Themen^_^