Drag & Drop se sale del div

SeaPirates · #1 (**permalink**) 13/06/2011, 11:21

Código Javascript:

Ver original<script type="text/javascript" src="http://josesuarezcordova.com/ejemplosJquery/interface/js/jquery.js"></script>
<script type="text/javascript" src="http://josesuarezcordova.com/ejemplosJquery/interface/js/iutil.js"></script>
<script type="text/javascript" src="http://josesuarezcordova.com/ejemplosJquery/interface/js/idrag.js"></script>
 
<script type="text/javascript">
$(document).ready(
    function()
    {
        $('#stickie-31').Draggable({ containment: "#playground", scroll: false });
  }
);
</script>
<div style="background-color:green;width:250px;" id="playground">
<div id="stickie-31">
Stick
</div>
</div>

Estoy usando eso para comprobar si funciona, el problema es que lo puedes arrastrar incluso fuera del div "playground" y lo que quiero es que no se pueda sacar del div...

Alguna ayuda? Intenté usar el containment pero no funciona

saintfantasy · #2 (**permalink**) 24/11/2011, 14:06

Código:

<HTML>  
  <HEAD>  
    
  <STYLE type="text/css">  
  #.arrastrarIMG{  
      position:relative;  
  }  
  #Div1 {
	position:relative;
	width:140px;
	height:140px;
	z-index:1;
	background-color: #FF0000;
}
  #Div2 {
	position:relative;
	width:140px;
	height:140px;
	z-index:2;
	background-color: #0000FF;
}
  #Div3 {
	position:relative;
	width:140px;
	height:140px;
	z-index:3;
	background-color: #000000;
}
  </STYLE>  
    
 <STYLE type="text/css">
#cont {
	position:relative;
	left:693px;
	top:66px;
	width:165px;
	height:319px;
	z-index:4;
}
 </STYLE>

<script language="javascript">
<!-- Created by: elouai.com -->
<!-- Revised by: Silly_TomcaT -->

  var ie = document.all;
  var nn6 = document.getElementById&&!document.all;
  var isdrag = false;
  var x,y;
  var dobj;
 
function movemouse(e) {
  if (isdrag) {
******************Acá borras la primera  linea**************
>>>  dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
	dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
	return false;
  }
}
 
function selectmouse(e) {
	var fobj = nn6 ? e.target : event.srcElement;
	var topelement = nn6 ? "HTML" : "BODY";
	while (fobj.tagName != topelement && fobj.className != "arrastrarIMG") {
		fobj = nn6 ? fobj.parentNode : fobj.parentElement;
	}

	if (fobj.className == "arrastrarIMG") {
		isdrag = true;
		dobj = fobj;
		tx = parseInt(dobj.style.left + 10,10);
		ty = parseInt(dobj.style.top + 0,10);
		x = nn6 ? e.clientX : event.clientX;
		y = nn6 ? e.clientY : event.clientY;
		document.onmousemove = movemouse;
		return false;
	}
}

document.onmousedown = selectmouse;
document.onmouseup = new Function("isdrag=false");

</script>  
  </HEAD>  
    
<BODY>  
    

  <div id="cont">
  <div id="Div1" class="arrastrarIMG"></div>
  <div id="Div2" class="arrastrarIMG"></div>
  <div id="Div3" class="arrastrarIMG"></div>
  </div>
  
</BODY>  
  </HTML>

Espero que te sirba.