jQuery Resize minimalistic

daflowjoe

Mitglied
Hi Leude,

habe mich gerade eingehend mit Risizing auseinandersetzen muessen.

Ich benutze folgende jQuery Funktion:

http://dev.iceburg.net/jquery/jqDnR/

Wenn ich mir allerdings die dazugehoerigen jQuerydateien und anschaue und versuche derren FUnktionsweise nachzuvollziehen haperts komplett oO

Das Problem ist, dass ich ein Balken aehnlich wie im MS Project haben will, aber es klappt einfach nicht den Balken nach links zu resizen, der resize funktioniert mit der Funktion nur noch nach rechts.

Hat jemand eine Idee, wie man die Funktion so umfunktionieren koennte, dass man auch nach links resizen kann?

Hier mal die jS Funktion, entweder bin ich zu blöd oder die Funktion ist einfach mal kryptisch:

Code:
/*
 * jqDnR - Minimalistic Drag'n'Resize for jQuery.
 *
 * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * $Version: 2007.08.19 +r2
 */

(function($){
$.fn.jqDrag=function(h){return i(this,h,'d');};
$.fn.jqResize=function(h){return i(this,h,'r');};
$.jqDnR={dnr:{},e:0,
drag:function(v){
 if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
 else E.css({width:Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)});
  return false;},
stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);}
};
var J=$.jqDnR,M=J.dnr,E=J.e,
i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e;
 h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
 // attempt utilization of dimensions plugin to fix IE issues
 if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}}
 M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')};
 E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
 return false;
 });
});},
f=function(k){return parseInt(E.css(k))||false;};
})(jQuery);

Bin für jeden Rat dankbar :)
 
Zuletzt bearbeitet:
Moin,

gibt es einen Grund dafür, dass du dafür nicht die Möglichkeiten von JQuery-UI nutzt?
Damit kann man Draggen, Droppen und Resizen(in alle Richtungen)

Wie sieht denn der Balken aus in MS Project? Ich kenne das nicht :-(
 
Hallo, ich hab mir das jQuery UI mal angeschaut allerdings kann man da auch nicht so nach links resizen, wie ich mir das vorstelle.

Man kann zwar nach links ziehen, um die Box zu verkleinern, aber ich will die Box nach links quasi vergrößern, wenn ich links einen Anfasser habe. Das geht natürlich nicht soo einfach, da ja mit dem resize nur die width verändert wird. Es müsste also Echtzeit neben der Width auch noch die Position mitgesetzt werden. MÜsste ja eigentlich gehen, so dass man das Gefühl bekommt, dass der Container nach links vergrößert wird.

Das soll mit jQuery UI gehen?

Mfj Joe
 
Geht doch ganz einfach ...die Position wird auch verändert, wenn man links resized :confused:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head xml:lang="de" lang="de">
<title>DnR</title>

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<style type="text/css">
    body{background:AppWorkspace;}
    #resizable { 
      width: 300px; 
      height: 200px;
      background: Window;
      border:1px solid ActiveBorder;
    }
    
    #resizable h1{
      font-size:12px;
      font-weight:bold;
      background:ActiveCaption;
      color:CaptionText;
      padding:2px;
      text-align:center;
    }

    .ui-resizable-handle{
      background:ActiveCaption !important;
      width:12px;
      height:12px;
    }
    
    .ui-resizable-sw{
      bottom:1px;
      left:1px;
    }
</style>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>


</head>
<body>
<div id="resizable" >
  <h1 style="margin-top:0">
    Drag me
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam dictum tempus quam eget posuere. Quisque non gravida ipsum. 
    Nam ante nisl; dapibus nec venenatis et, pharetra at enim. 
  </p>
</div>

<script type="text/javascript">
<!--
$().ready(function() {
  $('#resizable')
    .resizable({handles:'se,sw'})
    .draggable({ handle: ':first' })
    .css({'left':'33%','top':'100px'});
});
//-->
</script>
</body>
</html>
 

Neue Beiträge

Zurück