Drag&drop

nuvola10

Drag&drop

Ciao a Tutti,
vi scrivo perche ho un problema!
devo effettuare il drag &drop (in php o ajax) di alcune immagini e poi memorizzarne la posizione.
potete darmi qualche consiglio?

grazie!!!!

probid

Ciao Nuvola10,
benvenuto/a nel forum GT
Quello che vuoi fare tu è fattibile soltanto in ajax/javascript.
Purtroppo php non offre queste possibilità
Quindi sposto in linguaggi client
Ciao!

nuvola10

Ciao,

ho trovato il modo di fare il drag&drop di alcune foto, solo adesso il mio problema è che in questo codice viene utilizzato Opera come Browser invece io ho bisogno di farlo funzionare su Explorer e mozilla.
Ora come posso farlo funzionare su Explorer e Mozilla?
Io nn sono molto esperta potete aiutarmi?

Grazie!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Funzionalità Drag & Drop</title>
<style type="text/css">
body{
/*
You can remove these four options

    */
    background-image:url('http://www.dhtmlgoodies.com/images/heading3.gif');
    background-repeat:no-repeat;
    padding-top:85px;    
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    
    
    height:100%;
    width:100%;
    margin:10px;
    padding-left:0px;
}

form{
    display:inline;
}
.imageBox,.imageBoxHighlighted{
    width:130px;    /* Total width of each image box */
    height:160px;    /* Total height of each image box */
    float:left;
}
.imageBox_theImage{
    width:110px;    /* Width of image */
    height:125px;    /* Height of image */
    
    /* 
    Don't change these values *
    */
    background-position: center center;
    background-repeat: no-repeat;        
    margin: 0 auto;
    margin-bottom:2px;
}

.imageBox .imageBox_theImage{
    border:1px solid #DDD;    /* Border color for not selected images */
    padding:2px;
}
.imageBoxHighlighted .imageBox_theImage{
    border:3px solid #316AC5;    /* Border color for selected image */
    padding:0px;

}
.imageBoxHighlighted span{    /* Title of selected image */
    background-color:;
    color:#FFFFFF;
    padding:2px;
}

.imageBox_label{    /* Title of images - both selected and not selected */
    text-align:center;
    font-family: arial;
    font-size:11px;        
    padding-top:2px;
    margin: 0 auto;
}

/* 
DIV that indicates where the dragged image will be placed    
*/
#insertionMarker{
    height:150px;
    width:6px;
    position:absolute;
    display:none;

}

#insertionMarkerLine{
    width:6px;    /* No need to change this value */
    height:145px;    /* To adjust the height of the div that indicates where the dragged image will be dropped */

}
     img{
    float:left;
}

/*
DIV that shows the image as you drag it 
*/
#dragDropContent{

    opacity:0.5;    /* 40 % opacity */
    filter:alpha(opacity=50);    /* 40 % opacity */

    /* 
    No need to change these three values 
    */
    position:absolute;
    z-index:10;
    display:none;
        
}


</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    

Terms of use:
LGPL: See web page for more info.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/    
//var operaBrowser = false;
//if(navigator.userAgent.indexOf('Opera')>=0)operaBrowser=1;
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;


function cancelEvent()
{
    return false;
}
var activeImage = false;
var readyToMove = false;
var moveTimer = -1;
var dragDropDiv;
var insertionMarker;

var offsetX_marker = -3;    // offset X - element that indicates destinaton of drop
var offsetY_marker = 0;    // offset Y - element that indicates destinaton of drop

var firefoxOffsetX_marker = -3;
var firefoxOffsetY_marker = -2;

if(navigatorVersion<6 && MSIE){    /* IE 5.5 fix */
    offsetX_marker-=23;
    offsetY_marker-=10;        
}

var destinationObject = false;

var divXPositions = new Array();
var divYPositions = new Array();
var divWidth = new Array();
var divHeight = new Array();
    
var tmpLeft = 0;
var tmpTop = 0;

var eventDiff_x = 0;
var eventDiff_y = 0;
    
function getTopPos(inputObj)
{        
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
      if(inputObj.tagName!='HTML'){
          returnValue += (inputObj.offsetTop - inputObj.scrollTop);
          if(document.all)returnValue+=inputObj.clientTop;
      }
  } 
  return returnValue;
}
function getLeftPos(inputObj)
{      
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
      if(inputObj.tagName!='HTML'){
          returnValue += inputObj.offsetLeft;
          if(document.all)returnValue+=inputObj.clientLeft;
      }
  }
  return returnValue;
}
    
function selectImage(e)
{
    if(document.all /*&& !operaBrowser*/)e = event;
    var obj = this.parentNode;
    if(activeImage)activeImage.className='imageBox';
    obj.className = 'imageBoxHighlighted';
    activeImage = obj;
    readyToMove = true;
    moveTimer=0;
    
    tmpLeft = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    tmpTop = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    
    startMoveTimer();    
    
    
    return false;    
}

function startMoveTimer(){
    if(moveTimer>=0 && moveTimer<10){
        moveTimer++;
        setTimeout('startMoveTimer()',15);
    }
    if(moveTimer==10){
        getDivCoordinates();
        var subElements = dragDropDiv.getElementsByTagName('DIV');
        if(subElements.length>0){
            dragDropDiv.removeChild(subElements[0]);
        }
    
        dragDropDiv.style.display='block';
        var newDiv = activeImage.cloneNode(true);
        newDiv.className='imageBox';    
        newDiv.id='';
        dragDropDiv.appendChild(newDiv);    
        
        dragDropDiv.style.top = tmpTop + 'px';
        dragDropDiv.style.left = tmpLeft + 'px';
                        
    }
    return false;
}

function dragDropEnd()
{
    readyToMove = false;
    moveTimer = -1;

    dragDropDiv.style.display='none';
    insertionMarker.style.display='none';
    
    if(destinationObject && destinationObject!=activeImage){
        var parentObj = destinationObject.parentNode;
        parentObj.insertBefore(activeImage,destinationObject);
        activeImage.className='imageBox';
        activeImage = false;
        destinationObject=false;
        getDivCoordinates();
    }
    return false;
}

function dragDropMove(e)
{
    if(moveTimer==-1)return;
    if(document.all)e = event;
    var leftPos = e.clientX + document.documentElement.scrollLeft - eventDiff_x;
    var topPos = e.clientY + document.documentElement.scrollTop - eventDiff_y;
    dragDropDiv.style.top = topPos + 'px';
    dragDropDiv.style.left = leftPos + 'px';
    
    leftPos = leftPos + eventDiff_x;
    topPos = topPos + eventDiff_y;
    
    if(e.button!=1 && document.all )dragDropEnd();
    var elementFound = false;
    for(var prop in divXPositions){
        if(divXPositions[prop]/1 < leftPos/1 && (divXPositions[prop]/1 + divWidth[prop]*0.7)>leftPos/1 && divYPositions[prop]/1<topPos/1 && (divYPositions[prop]/1 + divWidth[prop])>topPos/1){
            
            if(document.all ){
                offsetX = offsetX_marker;
                offsetY = offsetY_marker;
            }else{
                offsetX = firefoxOffsetX_marker;
                offsetY = firefoxOffsetY_marker;
            }
            insertionMarker.style.top = divYPositions[prop] + offsetY + 'px';
            insertionMarker.style.left = divXPositions[prop] + offsetX + 'px';
            insertionMarker.style.display='block';    
            destinationObject = document.getElementById(prop);
            elementFound = true;    
            break;    
        }                
    }
    
    
    if(!elementFound){
        insertionMarker.style.display='none';
        destinationObject = false;
    }
    
    return false;
    
}



function getDivCoordinates()
{
    var divs = document.getElementsByTagName('DIV');
    for(var no=0;no<divs.length;no++){    
        if(divs[no].className=='imageBox' || divs[no].className=='imageBoxHighlighted' && divs[no].id){
            divXPositions[divs[no].id] = getLeftPos(divs[no]);            
            divYPositions[divs[no].id] = getTopPos(divs[no]);            
            divWidth[divs[no].id] = divs[no].offsetWidth;            
            divHeight[divs[no].id] = divs[no].offsetHeight;            
        }        
    }
}

function saveImageOrder()
{
    var orderString = "";
    var objects = document.getElementsByTagName('DIV');
    for(var no=0;no<objects.length;no++){
        if(objects[no].className=='imageBox' || objects[no].className=='imageBoxHighlighted'){
            if(orderString.length>0)orderString = orderString + ',';
            orderString = orderString + objects[no].id;
        }            
    }
    
    document.getElementById('debug').innerHTML = 'This is the new order of the images(IDs) : <br>' + orderString;
    
}

function initGallery()
{
    var divs = document.getElementsByTagName('DIV');
    for(var no=0;no<divs.length;no++){
        if(divs[no].className=='imageBox_theImage' || divs[no].className=='imageBox_label'){
            divs[no].onmousedown = selectImage;    

        }
    }
    
    var insObj = document.getElementById('insertionMarker');
    var images = insObj.getElementsByTagName('IMG');
    document.body.onselectstart = cancelEvent;
    document.body.ondragstart = cancelEvent;
    document.body.onmouseup = dragDropEnd;
    document.body.onmousemove = dragDropMove;

    
    window.onresize = getDivCoordinates;
    
    dragDropDiv = document.getElementById('dragDropContent');
    insertionMarker = document.getElementById('insertionMarker');
    getDivCoordinates();
}

window.onload = initGallery;
</script>

</head>
<body>
Funzionalità per il progetto di Lamp
<form action="somePage.html" method="post">
<p> </p>
<p> </p>
<div style="clear:both;padding-bottom:10px">

</div>
</form>
<?$squadre = getSquadre();?>

 <? foreach ($squadre as $id =>$immagine) { ?>
 <div class="imageBox" id="imageBox0">
    <div class="imageBox_theImage"><img src= "<?=$immagine?>"></div>    
    <div class="imageBox_label">immagini</div>
</div>

    <? } ?>
<? foreach ($squadre as $id =>$immagine) { ?>
 <div class="imageBox" id="imageBox0">
    <div class="imageBox_theImage"><img src= "<?=$immagine?>"></div>    
    <div class="imageBox_label">immagini</div>
</div>

    <? } ?>

osvi

scriptaculus permette di effettuare il drag and drop

Drag&amp;drop

Drag&drop