Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

benck

com Drag and Drop List

Por , em Javascript

Recommended Posts

benck    2

benck
Postado

Olá pessoal!

 

Bom, estou alterando um código de Drag and Drop List, porém se dentro da div que controla as ações eu colocar uma tabela a ação drag and drop não funciona... Se tiver apenas texto funciona legal.

 

Gostaria de saber como fazer para botar uma tabela dentro da div, e continuar a funcionar normalmente

 

O código segue abaixo

 

Obrigado

 

Eric

 

<html><head>

<script>

var mouseOffset = null;

var iMouseDown = false;

var lMouseState = false;

var dragObject = null;

 

// Demo 0 variables

var DragDrops = [];

var curTarget = null;

var lastTarget = null;

var dragHelper = null;

var rootParent = null;

var rootSibling = null;

 

 

// Demo1 variables

var D1Target = null;

 

//Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

 

function CreateDragContainer(){

 

var cDrag = 0;//DragDrops.length;

DragDrops[cDrag] = [];

 

for(var i=0; i<arguments.length; i++){

var cObj = arguments;

DragDrops[cDrag].push(cObj);

cObj.setAttribute('DropObj', cDrag);

 

for(var j=0; j<cObj.childNodes.length; j++){

 

// Firefox puts in lots of #text nodes...skip these

if(cObj.childNodes[j].nodeName=='#text') continue;

 

cObj.childNodes[j].setAttribute('DragObj', cDrag);

}

}

}

 

function getPosition(e){

var left = 0;

var top = 0;

while (e.offsetParent){

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

e = e.offsetParent;

}

 

 

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

 

return {x:left, y:top};

 

}

 

function mouseCoords(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

 

function getMouseOffset(target, ev){

ev = ev || window.event;

 

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

 

function mouseMove(ev){

ev = ev || window.event;

var target = ev.target || ev.srcElement;

var mousePos = mouseCoords(ev);

 

if(lastTarget && (target!==lastTarget)){

 

var origClass = lastTarget.getAttribute('origClass');

if(origClass) lastTarget.className = origClass;

}

var dragObj = target.getAttribute('DragObj');

if(dragObj!=null){

if(target!=lastTarget){

 

 

var oClass = target.getAttribute('overClass');

if(oClass){

target.setAttribute('origClass', target.className);

target.className = oClass;

}

}

if(iMouseDown && !lMouseState){

 

curTarget = target;

rootParent = curTarget.parentNode;

rootSibling = curTarget.nextSibling;

 

mouseOffset = getMouseOffset(target, ev);

 

for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes);

 

dragHelper.appendChild(curTarget.cloneNode(true));

dragHelper.style.display = 'block';

 

var dragClass = curTarget.getAttribute('dragClass');

if(dragClass){

dragHelper.firstChild.className = dragClass;

}

dragHelper.firstChild.removeAttribute('DragObj');

 

var dragConts = DragDrops[dragObj];

 

curTarget.setAttribute('startWidth', parseInt(curTarget.offsetWidth));

curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));

curTarget.style.display = 'none';

 

for(var i=0; i<dragConts.length; i++){

with(dragConts){

var pos = getPosition(dragConts);

 

setAttribute('startWidth', parseInt(offsetWidth));

setAttribute('startHeight', parseInt(offsetHeight));

setAttribute('startLeft', pos.x);

setAttribute('startTop', pos.y);

}

 

for(var j=0; j<dragConts.childNodes.length; j++){

with(dragConts.childNodes[j]){

if((nodeName=='#text') || (dragConts.childNodes[j]==curTarget)) continue;

 

var pos = getPosition(dragConts.childNodes[j]);

setAttribute('startWidth', parseInt(offsetWidth));

setAttribute('startHeight', parseInt(offsetHeight));

setAttribute('startLeft', pos.x);

setAttribute('startTop', pos.y);

}

}

}

}

}

 

if(curTarget){

dragHelper.style.top = mousePos.y - mouseOffset.y;

dragHelper.style.left = mousePos.x - mouseOffset.x;

 

var dragConts = DragDrops[curTarget.getAttribute('DragObj')];

var activeCont = null;

 

var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);

var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

for(var i=0; i<dragConts.length; i++){

with(dragConts){

if((parseInt(getAttribute('startLeft')) < xPos) &&

(parseInt(getAttribute('startTop')) < yPos) &&

((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) &&

((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){

 

activeCont = dragConts;

 

break;

}

}

}

if(activeCont){

 

var beforeNode = null;

 

for(var i=activeCont.childNodes.length-1; i>=0; i--){

with(activeCont.childNodes){

if(nodeName=='#text') continue;

 

if(curTarget != activeCont.childNodes &&

((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) &&

((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){

beforeNode = activeCont.childNodes;

}

}

}

 

if(beforeNode){

if(beforeNode!=curTarget.nextSibling){

 

 

activeCont.insertBefore(curTarget, beforeNode);

}

 

} else {

if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){

 

 

activeCont.appendChild(curTarget);

}

}

 

setTimeout(function(){

var contPos = getPosition(activeCont);

activeCont.setAttribute('startWidth', parseInt(activeCont.offsetWidth));

activeCont.setAttribute('startHeight', parseInt(activeCont.offsetHeight));

activeCont.setAttribute('startLeft', contPos.x);

activeCont.setAttribute('startTop', contPos.y);}, 5);

 

// make our drag item visible

if(curTarget.style.display!=''){

 

curTarget.style.display = '';

curTarget.style.visibility = 'hidden';

}

} else {

 

// our drag item is not in a container, so hide it.

if(curTarget.style.display!='none'){

 

curTarget.style.display = 'none';

}

}

}

 

lMouseState = iMouseDown;

 

lastTarget = target;

lMouseState = iMouseDown;

 

if(curTarget || dragObject) return false;

}

 

function mouseUp(ev){

 

if(curTarget){

 

 

dragHelper.style.display = 'none';

if(curTarget.style.display == 'none'){

if(rootSibling){

rootParent.insertBefore(curTarget, rootSibling);

} else {

rootParent.appendChild(curTarget);

}

}

curTarget.style.display = '';

curTarget.style.visibility = 'visible';

}

curTarget = null;

dragObject = null;

 

iMouseDown = false;

 

}

 

function mouseDown(ev){

ev = ev || window.event;

var target = ev.target || ev.srcElement;

 

iMouseDown = true;

if(target.onmousedown || target.getAttribute('DragObj')){

return false;

}

}

 

 

document.onmousemove = mouseMove;

document.onmousedown = mouseDown;

document.onmouseup = mouseUp;

 

window.onload = function(){

 

CreateDragContainer(document.getElementById('divcampos'));

 

dragHelper = document.createElement('DIV');

dragHelper.style.cssText = 'position:absolute;display:none;';

 

document.body.appendChild(dragHelper);

}

</script>

<style type="text/css">

<!--

.estilo {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

cursor: move;

}

-->

</style>

</head>

<body>

<div id="campos">

<div>

<div class="DragContainer" id="divcampos">

<div class="estilo" id="1">Item 1</div>

<div class="estilo" id="2">Item 2</div>

<div class="estilo" id="3"><table width="607" border="1" cellspacing="1" cellpadding="1"><tr><td width="75">Item 3</td><td width="190"> </td><td width="324"> </td></tr></table></div>

<div class="estilo" id="4">Item 4</div>

</div>

</div>

</div>

<p> </p>

<p>

 

</p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Fernandes    0

Ricardo Fernandes
Postado

No lugar de div class você pode usar<div id="campos" class="DragContainer"><div id="divcampos"><ul><li>Menu</li><li>Menu2</li><li>Menu3</li><li>Menu4</li></ul></div>Não vai funcionar?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito