dê seu feedback
post favorito
Como limitar a área arrastavel do Drag and Drop
Seu objeto não sumirá mais da tela quando você o arrastar para fora dos limites do browser :)
Procurando na internet sobre esses objetos que podem ser arrastados e achei coisas bem interessantes, mas nada que falasse como limitar a área, ou tamanho maximo dessa, por onde o objeto é arrastado. Então simplesmente peguei um desses codigos eu fiz uma pequena alteração. O legal desse codigo é que ele é uma função então pode ser chamado infinitas vezes e você não precisa ficar se preocupando em ficar reconfigurando a função todas as vezes :)
<html>
<head>
<style>
body,td,tr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px 0px;
}
</style>
</head>
<script>
var objSelecionado = null;
var mouseOffset = null;
function addEvent(obj, evType, fn) {
if (typeof obj == "string") {
if (null == (obj = document.getElementById(obj))) {
throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
}
}
if (obj.attachEvent) {
return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
} else {
throw new Error("Seu browser não suporta adição de eventos. Senta, chora e pega um navegador mais recente.");
}
}
function mouseCoords(ev){
if(typeof(ev.pageX)!=="undefined"){
return {x:ev.pageX, y:ev.pageY};
}else{
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
}
function getPosition(e, ev){
var ev = ev || window.event;
if(e.constructor==String){ e = document.getElementById(e);}
var left = 0, top = 0;
var coords = mouseCoords(ev);
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x: coords.x - left, y: coords.y - top};
}
function dragdrop(local_click, caixa_movida) {
//local click indica quem é o cara que quando movido, move o caixa_movida
if(local_click.constructor==String){ local_click = document.getElementById(local_click);}
if(caixa_movida.constructor==String){ caixa_movida = document.getElementById(caixa_movida);}
local_click.style.cursor = 'move';
if(!caixa_movida.style.position || caixa_movida.style.position=='static'){
caixa_movida.style.position='relative'
}
local_click.onmousedown = function(ev) {
objSelecionado = caixa_movida;
mouseOffset = getPosition(objSelecionado, ev);
if(mouseOffset < 0){objSelecionado.style.margin = '50px';}
};
document.onmouseup = function() {
objSelecionado = null;
}
document.onmousemove = function(ev) {
if (objSelecionado) {
var ev = ev || window.event;
var mousePos = mouseCoords(ev);
var pai = objSelecionado.parentNode;
//as variáveis w e h definem a posição do(s) objeto(s) movido(s)
var w = (mousePos.x - mouseOffset.x - pai.offsetLeft);
var h = (mousePos.y - mouseOffset.y - pai.offsetTop);
//as variáveis areaHorizontal e areaVertical definem a área maxima, onde o objeto será movido (nesse caso é a area maxima do browser)
var areaHorizontal = document.body.clientWidth - objSelecionado.clientWidth - 2;
var areaVertical = document.body.clientHeight - objSelecionado.clientHeight - 2;
objSelecionado.style.left = w + 'px';
objSelecionado.style.top = h + 'px';
//essa é a estrutura de condição que reposiciona o objeto movido para não ultrapassar a área máxima
if(w >= areaHorizontal){
objSelecionado.style.left = areaHorizontal;
}
if(w <= 0){
objSelecionado.style.left = 0;
}
if(h >= areaVertical){
objSelecionado.style.top = areaVertical;
}
if(h <= 0){
objSelecionado.style.top = 0;
}
return false;
}
}
}
</script>
<body>
<!-- esta é a div de exemplo que será movida ao clicar na div de borda azul -->
<div id='movido' border: 1px solid black; width: 200px;'>
<div id='movedor' border: 1px solid blue;'>mova</div>
sou a div lálalá
<br>
lálálá
</div>
<!-- aqui o script chamando a função que ativa o drag'n'drop -->
<script>dragdrop('movedor','movido');</script>
</body>
</html>
2 COMENTÁRIOS
em 23/9/2010 11:57 - Responder
Gregory Monteirovi rapidamente no seu código que você colocou as imagens que quer arrastar dentro de uma div com o style de nome "itemFullText", nessa div altere por favor acrescentando posicionamento relativo
e nas divs onde estão as imagens a serem arrastadas altere acrescentando posicionamento absoluto, assim fica mais fácil de posicionar todas no mesmo lugar e para te ajudar sobre como limitar a área de onde será arrastado essas imagens seria interessante eu ver melhor o script e como ele é "startado"
bons códigos
em 5/10/2010 12:43 - Responder
Estudo comparativo entre banco de dados IBM Informix e Microsoft SQL
Space do autor
2
2
Conheça os planos de créditos DevMedia e visualize esse post agora mesmo!