Container dragable et extensible

J'essaie d'autoriser un objet à glisser sur le côté droit ou inférieur de son confinement et je ne peux pas le faire correctement sans arrêter de faire glisser l'élément.Container dragable et extensible

Mon code:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #parent { height: 500px; width: 500px; border: 1px black solid; } 
    #images { height: 100px; width: 100px; background-color:orange; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
</head> 
<body> 
<div id="parent"> 
    <div id="images"></div> 
</div> 
<script> 
$(document).ready(function() { 
    $("#images").draggable({ 
     containment: $("#parent"), 
     drag: function(event, ui) { 
      var helper = ui.helper, pos = ui.position; 
      if(pos.left + parseInt(helper.outerWidth(), 10) == parseInt($("#parent").css("width"), 10)) { 
       $("#parent").animate({width: "+=100"}); 
      } 
      if(pos.top + parseInt(helper.outerHeight(), 10) == parseInt($("#parent").css("height"), 10)) { 
       $("#parent").animate({height: "+=100"}); 
      } 
     } 
    }); 
}); 
</script> 
</body> 
</html>

Avez-vous une idée sur l'actualisation de la taille de confinement afin de continuer glisser sur le côté droit ou inférieur?

Merci!

Source

2010-10-06 Arnaud F.

Pouvez-vous attribuer la prime, si vous êtes satisfait de ma solution? Si personne d'autre ne vote pour ma réponse, les 50 points vont simplement s'évaporer dans l'éther. :( – Thomas

solution simple (voir DEMO):

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #parent { height: 300px; width: 300px; border: 1px black solid; position: relative; left: 0; } 
    #images { height: 100px; width: 100px; background-color:orange; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
</head> 
<body> 
<div id="parent"> 
    <div class="container"> 
     <div id="images"></div> 
    </div> 
</div> 
<script> 
$(document).ready(function() { 
    var 
     $document = $(document), 
     $parent = $("#parent"), 
     $container = $(".container", $parent), 
     offset = $container.offset(), 
     scrollbarSafety = 15; // use this to avoid dragging outside of window, thus creating scrollbars and wreaking all kinds of havoc on draggables containment checks 

    $container 
     .width($document.width() - offset.left - scrollbarSafety) 
     .height($document.height() - offset.top - scrollbarSafety); 

    $("#images") 
      .draggable(
      { 
       containment: $container, 
       drag: 
        function(event, ui) 
        { 
         var 
          $draggee = $(this), 
          draggeePosition = $draggee.position(), 
          shouldWidth = draggeePosition.left + $draggee.width(), 
          shouldHeight = draggeePosition.top + $draggee.height(); 
         if($parent.width() < shouldWidth) 
         { 
          $parent.width(shouldWidth); 
         } 
         if($parent.height() < shouldHeight) 
         { 
          $parent.height(shouldHeight); 
         } 
      } 
      } 
     ); 
}); 
</script> 
</body> 
</html>

Source

2010-10-16 06:58:53 Thomas

Répondre

Questions connexes