Ir para conteúdo

POWERED BY:

Arquivado

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

thiago_php

drag drop

Por , em Javascript

Recommended Posts

thiago_php    0

thiago_php
Postado

entao pessoal to com esse script aki, de drag drop gostaria de usar ele com tabelas em vez de ul e li.

tava tentando modificar mas nao deu certo se alguem poder ajudar;

 

 

<HTML><HEAD>

<STYLE type=text/css>BODY {

FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; BACKGROUND-COLOR: #e2ebed

}

#footer {

CLEAR: both; PADDING-RIGHT: 3px; MARGIN-TOP: 2px; VERTICAL-ALIGN: middle; WIDTH: 790px; HEIGHT: 30px; BACKGROUND-COLOR: #317082; TEXT-ALIGN: right

}

#footer FORM {

MARGIN: 2px 0px 0px

}

#dhtmlgoodies_dragDropContainer {

BORDER-RIGHT: #317082 1px solid; BORDER-TOP: #317082 1px solid; BORDER-LEFT: #317082 1px solid; WIDTH: 790px; BORDER-BOTTOM: #317082 1px solid; HEIGHT: 720px; BACKGROUND-COLOR: #fff; moz-user-select: none

}

#dhtmlgoodies_dragDropContainer UL {

PADDING-RIGHT: 2px; MARGIN-TOP: 0px; PADDING-LEFT: 2px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 2px; MARGIN-LEFT: 0px; PADDING-TOP: 2px

}

#dhtmlgoodies_dragDropContainer LI {

BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 0.9em; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 20px; BACKGROUND-COLOR: #eee

}

#dragContent LI {

BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 0.9em; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 20px; BACKGROUND-COLOR: #eee

}

LI#indicateDestination {

BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 0.9em; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000 1px solid; CURSOR: pointer; PADDING-TOP: 2px; BORDER-BOTTOM: #000 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 20px; BACKGROUND-COLOR: #eee

}

LI#indicateDestination {

BORDER-RIGHT: #600 1px dotted; BORDER-TOP: #600 1px dotted; BORDER-LEFT: #600 1px dotted; BORDER-BOTTOM: #600 1px dotted; BACKGROUND-COLOR: #fff

}

DIV#dhtmlgoodies_listOfItems {

PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; WIDTH: 160px

}

#dhtmlgoodies_listOfItems UL {

HEIGHT: 560px

}

DIV#dhtmlgoodies_listOfItems DIV {

BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid

}

DIV#dhtmlgoodies_listOfItems DIV UL {

MARGIN-LEFT: 10px

}

#dhtmlgoodies_listOfItems DIV P {

PADDING-LEFT: 12px; FONT-WEIGHT: bold; MARGIN: 0px 0px 5px; COLOR: #fff; BACKGROUND-COLOR: #317082

}

#dhtmlgoodies_dragDropContainer .mouseover {

BORDER-RIGHT: #317082 1px solid; BORDER-TOP: #317082 1px solid; BORDER-LEFT: #317082 1px solid; BORDER-BOTTOM: #317082 1px solid; BACKGROUND-COLOR: #e2ebed

}

DIV#dhtmlgoodies_mainContainer {

FLOAT: left; WIDTH: 590px

}

#dhtmlgoodies_mainContainer DIV {

BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; MARGIN-TOP: 0px; FLOAT: left; MARGIN-BOTTOM: 10px; BORDER-LEFT: #999 1px solid; WIDTH: 170px; MARGIN-RIGHT: 10px; BORDER-BOTTOM: #999 1px solid

}

#dhtmlgoodies_mainContainer DIV UL {

MARGIN-LEFT: 10px

}

#dhtmlgoodies_mainContainer DIV P {

PADDING-RIGHT: 0px; PADDING-LEFT: 12px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 5px; COLOR: #fff; PADDING-TOP: 0px; BACKGROUND-COLOR: #317082

}

#dhtmlgoodies_mainContainer UL {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 0px; OVERFLOW: hidden; WIDTH: 152px; HEIGHT: 80px; BORDER-RIGHT-WIDTH: 0px

}

#dragContent {

PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; Z-INDEX: 2000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 20px

}

#dragDropIndicator {

PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; Z-INDEX: 1000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 7px; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 10px

}

</STYLE>

 

<STYLE type=text/css media=print>DIV#dhtmlgoodies_listOfItems {

DISPLAY: none

}

BODY {

BACKGROUND-COLOR: #fff

}

IMG {

DISPLAY: none

}

#dhtmlgoodies_dragDropContainer {

BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px

}

P {

MARGIN-BOTTOM: 0px

}

</STYLE>

 

<script type=text/javascript>

 

/* VARIABLES YOU COULD MODIFY */

var boxSizeArray = [4,4,4,3,7]; // Array indicating how many items there is rooom for in the right column ULs

 

var arrow_offsetX = -5; // Offset X - position of small arrow

var arrow_offsetY = 0; // Offset Y - position of small arrow

 

var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow

var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow

 

var verticalSpaceBetweenListItems = 3; // Pixels space between one <li> and next

// Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li

 

 

var indicateDestionationByUseOfArrow = false; // Display arrow to indicate where object will be dropped(false = use rectangle)

 

var cloneSourceItems = false; // Items picked from main container will be cloned(i.e. "copy" instead of "cut").

var cloneAllowDuplicates = true; // Allow multiple instances of an item inside a small box(example: drag Student 1 to team A twice

 

/* END VARIABLES YOU COULD MODIFY */

 

var dragDropTopContainer = false;

var dragTimer = -1;

var dragContentObj = false;

var contentToBeDragged = false; // Reference to dragged <li>

var contentToBeDragged_src = false; // Reference to parent of <li> before drag started

var contentToBeDragged_next = false; // Reference to next sibling of <li> to be dragged

var destinationObj = false; // Reference to <UL> or <LI> where element is dropped.

var dragDropIndicator = false; // Reference to small arrow indicating where items will be dropped

var ulPositionArray = new Array();

var mouseoverObj = false; // Reference to highlighted DIV

 

var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;

var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;

 

 

var indicateDestinationBox = false;

function getTopPos(inputObj)

{

var returnValue = inputObj.offsetTop;

while((inputObj = inputObj.offsetParent) != null){

if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

}

return returnValue;

}

 

function getLeftPos(inputObj)

{

var returnValue = inputObj.offsetLeft;

while((inputObj = inputObj.offsetParent) != null){

if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

}

return returnValue;

}

 

function cancelEvent()

{

return false;

}

function initDrag(e) // Mouse button is pressed down on a LI

{

if(document.all)e = event;

var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

 

dragTimer = 0;

dragContentObj.style.left = e.clientX + sl + 'px';

dragContentObj.style.top = e.clientY + st + 'px';

contentToBeDragged = this;

contentToBeDragged_src = this.parentNode;

contentToBeDragged_next = false;

if(this.nextSibling){

contentToBeDragged_next = this.nextSibling;

if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;

}

timerDrag();

return false;

}

 

function timerDrag()

{

if(dragTimer>=0 && dragTimer<10){

dragTimer++;

setTimeout('timerDrag()',10);

return;

}

if(dragTimer==10){

 

if(cloneSourceItems && contentToBeDragged.parentNode.id=='allItems'){

newItem = contentToBeDragged.cloneNode(true);

newItem.onmousedown = contentToBeDragged.onmousedown;

contentToBeDragged = newItem;

}

dragContentObj.style.display='block';

dragContentObj.appendChild(contentToBeDragged);

}

}

 

function moveDragContent(e)

{

if(dragTimer<10){

if(contentToBeDragged){

if(contentToBeDragged_next){

contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);

}else{

contentToBeDragged_src.appendChild(contentToBeDragged);

}

}

return;

}

if(document.all)e = event;

var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);

var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

 

 

dragContentObj.style.left = e.clientX + sl + 'px';

dragContentObj.style.top = e.clientY + st + 'px';

 

if(mouseoverObj)mouseoverObj.className='';

destinationObj = false;

dragDropIndicator.style.display='none';

if(indicateDestinationBox)indicateDestinationBox.style.display='none';

var x = e.clientX + sl;

var y = e.clientY + st;

var width = dragContentObj.offsetWidth;

var height = dragContentObj.offsetHeight;

 

var tmpOffsetX = arrow_offsetX;

var tmpOffsetY = arrow_offsetY;

if(!document.all){

tmpOffsetX = arrow_offsetX_firefox;

tmpOffsetY = arrow_offsetY_firefox;

}

 

for(var no=0;no<ulPositionArray.length;no++){

var ul_leftPos = ulPositionArray[no]['left'];

var ul_topPos = ulPositionArray[no]['top'];

var ul_height = ulPositionArray[no]['height'];

var ul_width = ulPositionArray[no]['width'];

 

if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){

var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;

if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;

if(noExisting<boxSizeArray[no-1] || no==0){

dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';

var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');

 

var clonedItemAllreadyAdded = false;

if(cloneSourceItems && !cloneAllowDuplicates){

for(var liIndex=0;liIndex<subLi.length;liIndex++){

if(contentToBeDragged.id == subLi[liIndex].id)clonedItemAllreadyAdded = true;

}

if(clonedItemAllreadyAdded)continue;

}

 

for(var liIndex=0;liIndex<subLi.length;liIndex++){

var tmpTop = getTopPos(subLi[liIndex]);

if(!indicateDestionationByUseOfArrow){

if(y<tmpTop){

destinationObj = subLi[liIndex];

indicateDestinationBox.style.display='block';

subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);

break;

}

}else{

if(y<tmpTop){

destinationObj = subLi[liIndex];

dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';

dragDropIndicator.style.display='block';

break;

}

}

}

 

if(!indicateDestionationByUseOfArrow){

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

indicateDestinationBox.style.display='block';

ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);

}

 

}else{

if(subLi.length>0 && dragDropIndicator.style.display=='none'){

dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';

dragDropIndicator.style.display='block';

}

if(subLi.length==0){

dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'

dragDropIndicator.style.display='block';

}

}

 

if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];

mouseoverObj = ulPositionArray[no]['obj'].parentNode;

mouseoverObj.className='mouseover';

return;

}

}

}

}

 

/* End dragging

Put <LI> into a destination or back to where it came from.

*/

function dragDropEnd(e)

{

if(dragTimer==-1)return;

if(dragTimer<10){

dragTimer = -1;

return;

}

dragTimer = -1;

if(document.all)e = event;

 

 

if(cloneSourceItems && (!destinationObj || (destinationObj && (destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')))){

contentToBeDragged.parentNode.removeChild(contentToBeDragged);

}else{

 

if(destinationObj){

if(destinationObj.tagName=='UL'){

destinationObj.appendChild(contentToBeDragged);

}else{

destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);

}

mouseoverObj.className='';

destinationObj = false;

dragDropIndicator.style.display='none';

if(indicateDestinationBox){

indicateDestinationBox.style.display='none';

document.body.appendChild(indicateDestinationBox);

}

contentToBeDragged = false;

return;

}

if(contentToBeDragged_next){

contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);

}else{

contentToBeDragged_src.appendChild(contentToBeDragged);

}

}

contentToBeDragged = false;

dragDropIndicator.style.display='none';

if(indicateDestinationBox){

indicateDestinationBox.style.display='none';

document.body.appendChild(indicateDestinationBox);

 

}

mouseoverObj = false;

 

}

 

/*

Preparing data to be saved

*/

function saveDragDropNodes()

{

var saveString = "";

var uls = dragDropTopContainer.getElementsByTagName('UL');

for(var no=0;no<uls.length;no++){ // LOoping through all <ul>

var lis = uls[no].getElementsByTagName('LI');

for(var no2=0;no2<lis.length;no2++){

if(saveString.length>0)saveString = saveString + ";";

saveString = saveString + uls[no].id + '|' + lis[no2].id;

}

}

 

document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';

 

}

 

function initDragDropScript()

{

dragContentObj = document.getElementById('dragContent');

dragDropIndicator = document.getElementById('dragDropIndicator');

dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');

document.documentElement.onselectstart = cancelEvent;;

var listItems = dragDropTopContainer.getElementsByTagName('LI'); // Get array containing all <LI>

var itemHeight = false;

for(var no=0;no<listItems.length;no++){

listItems[no].onmousedown = initDrag;

listItems[no].onselectstart = cancelEvent;

if(!itemHeight)itemHeight = listItems[no].offsetHeight;

if(MSIE && navigatorVersion/1<6){

listItems[no].style.cursor='hand';

}

}

 

var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');

var uls = mainContainer.getElementsByTagName('UL');

itemHeight = itemHeight + verticalSpaceBetweenListItems;

for(var no=0;no<uls.length;no++){

uls[no].style.height = itemHeight * boxSizeArray[no] + 'px';

}

 

var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');

var itemBox = leftContainer.getElementsByTagName('UL')[0];

 

document.documentElement.onmousemove = moveDragContent; // Mouse move event - moving draggable div

document.documentElement.onmouseup = dragDropEnd; // Mouse move event - moving draggable div

 

var ulArray = dragDropTopContainer.getElementsByTagName('UL');

for(var no=0;no<ulArray.length;no++){

ulPositionArray[no] = new Array();

ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);

ulPositionArray[no]['top'] = getTopPos(ulArray[no]);

ulPositionArray[no]['width'] = ulArray[no].offsetWidth;

ulPositionArray[no]['height'] = ulArray[no].clientHeight;

ulPositionArray[no]['obj'] = ulArray[no];

}

 

if(!indicateDestionationByUseOfArrow){

indicateDestinationBox = document.createElement('LI');

indicateDestinationBox.id = 'indicateDestination';

indicateDestinationBox.style.display='none';

document.body.appendChild(indicateDestinationBox);

 

 

}

}

 

window.onload = initDragDropScript;

</SCRIPT>

</HEAD>

<BODY>

 

 

<script src="" type=text/javascript>

</SCRIPT>

 

 

<DIV id=dhtmlgoodies_dragDropContainer>

 

<DIV id=dhtmlgoodies_listOfItems>

<DIV>

 

<UL id=allItems>

<LI id=node1>Student A </LI>

<LI id=node2>Student B </LI>

<LI id=node3>Student C </LI>

<LI id=node4>Student D </LI>

<LI id=node5>Student E </LI>

<LI id=node6>Student F </LI>

<LI id=node7>Student G </LI>

<LI id=node8>Student H </LI>

<LI id=node9>Student I </LI>

<LI id=node10>Student J </LI>

<LI id=node11>Student K </LI>

<LI id=node12>Student L </LI>

<LI id=node13>Student M </LI>

<LI id=node14>Student N </LI>

<LI id=node15>Student O </LI></UL></DIV></DIV>

<DIV id=dhtmlgoodies_mainContainer><!-- ONE <UL> for each "room" -->

 

<DIV><UL id=box1></UL></DIV>

 

<DIV><UL id=box2></UL></DIV>

 

 

</DIV>

</DIV>

 

<DIV id=footer>

<FORM action=aPage.html method=post>

<INPUT onclick=saveDragDropNodes() type=button value=Save></FORM>

</DIV>

<UL id=dragContent></UL>

<DIV id=dragDropIndicator>

<IMG src="http://voip.terra.com.br/html/img/atend_imediato.gif">

</DIV>

 

<DIV id=saveContent></DIV>

 

 

 

</BODY></HTML>

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