Драг див ми трябва и въпрос за input

J

jooorooo

Registered
Така, хора трябва ми местещ се див с мишката, но да може да се мести в строго определен контеинер, а извън него да не може.

Другото, как да направя input полето да се разтяга според текста в него.
 
виз тук :
http://wiki.github.com/madrobby/scriptaculous/draggable

А за разстягането, мисля че трябва да напишеш едно скриптче, което да следи символите и ако минава еди си колко символа да задава другга ширина на инпут полето.
 
Проблема е, че трябва да измисля как да ги сметна, защото и размера в тях ще е динамичен :-)
 
Онзи драг нещо не ми върши работа. ето до момента какво съм сътворил

Код: 
<HTML>
<HEAD>
<TITLE>Dragable Div</TITLE>
<script type="text/javascript">
$ = function(sId) {
	if (!sId) {
		return null;
	}
	var returnObj = document.getElementById(sId);
	if (!returnObj && document.all) {
		returnObj = document.all[sId];
	}
	if (!returnObj) {
		alert("Element with the id \"" + sId + "\" not found.");
	}
	return returnObj;
}

function agent(v)
{
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v)
{
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX));
}

function dragOBJ(d,e,contaner)
{
cont = $(contaner);

coL = cont.offsetLeft+cont.clientWidth;
coT = cont.offsetTop+cont.clientHeight;
function drag(e)
{
if(!stop)
{
if((tY=xy(e)+oX-eX) <= cont.offsetLeft || (tY=xy(e)+oX-eX+d.clientWidth) >= coL) {
	d.style.top=(tX=xy(e,1)+oY-eY+'px');
} else if((tX=xy(e,1)+oY-eY) <= cont.offsetTop || (tX=xy(e,1)+oY-eY+d.clientHeight) >= coT) {
	d.style.left=(tY=xy(e)+oX-eX+'px');
} else {
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
$('eee').value = d.style.top+' x '+d.style.left;
$('eee1').value = tY=xy(e)+oX-eX+d.clientWidth+' x '+cont.offsetLeft +10 ;
}
}

var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

document.onmousemove=drag;
document.onmouseup=function()
{
stop=1;
document.onmousemove='';
document.onmouseup='';
};
}
</script>
</HEAD>

<BODY>
<input type="text" id="eee" />
<input type="text" id="eee1" />

<div id="contaner" style="width:700px; height:400px;border:1px solid;">

<div style="border:1px solid;position: fixed; width: 200px; top: 150px; left: 250px; cursor: move;" onmousedown="dragOBJ(this,event,'contaner'); return false;">
<TABLE border = "1" width="100%">
<TR>
<TD colspan="2">This is Dragable Div</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
</TR>
</div>

</div>
</BODY>
</HTML>

като тук:
Код: 
if((tY=xy(e)+oX-eX) <= cont.offsetLeft || (tY=xy(e)+oX-eX+d.clientWidth) >= coL) {
	d.style.top=(tX=xy(e,1)+oY-eY+'px');
} else if((tX=xy(e,1)+oY-eY) <= cont.offsetTop || (tX=xy(e,1)+oY-eY+d.clientHeight) >= coT) {
	d.style.left=(tY=xy(e)+oX-eX+'px');
} else {
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
нещо бъркам, защото ако се даде в някое ъгълче дива и може да излиза извън контеинера по height
 
ами за да ползваш драга ти трябва prototype библиотеката , също и scriptaculos библиотека с ефектите.
 
Мен целта ми е аз да го направя поради това, че едниствено ми трябва драг в определена кутия, а и отделно ще има малко допълнителни работи който ще са в последствие

едит:

ето ви готово кодче :-) вече работещо. ако не задавате ид в dragOBJ където е contaner то тогава елемента се мести из целия прозорец :-)

Код: 
<HTML>
<HEAD>
<TITLE>Dragable Div</TITLE>
<script type="text/javascript">
$ = function(sId) {
	if (!sId) {
		return null;
	}
	var returnObj = document.getElementById(sId);
	if (!returnObj && document.all) {
		returnObj = document.all[sId];
	}
	if (!returnObj) {
		alert("Element with the id \"" + sId + "\" not found.");
	}
	return returnObj;
}

function agent(v)
{
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v)
{
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX));
}

function dragOBJ(d,e,contaner)
{
function drag(e)
{
if(!stop)
{
if(contaner) {
cont = $(contaner);
ofL = cont.offsetLeft;
ofT = cont.offsetTop;
clW = cont.clientWidth;
clH = cont.clientHeight;
mubW = d.clientWidth;
mubH = d.clientHeight;
d.style.top = (xy(e,1)+oY-eY)<=ofT ? ofT : ((xy(e,1)+oY-eY) >= (ofT+clH-mubH) ? (ofT+clH-mubH) : (tX=xy(e,1)+oY-eY+'px'));
d.style.left = (xy(e)+oX-eX)<=ofL ? ofL : ((xy(e)+oX-eX) >= (ofL+clW-mubW) ? (ofL+clW-mubW) : (tY=xy(e)+oX-eX+'px'));
} else {
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
}
}

var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

document.onmousemove=drag;
document.onmouseup=function()
{
stop=1;
document.onmousemove='';
document.onmouseup='';
};
}
</script>
</HEAD>

<BODY>


<div id="contaner" style="width:700px; height:400px;border:1px solid;">

<div style="border:1px solid;position: fixed; width: 200px; top: 150px; left: 250px; cursor: move;" onmousedown="dragOBJ(this,event,'contaner'); return false;">
<TABLE border = "1" width="100%">
<TR>
<TD colspan="2">This is Dragable Div</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
</TR>
</div>

</div>
</BODY>
</HTML>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе