Avevo trovato e modificato a mio piacimento questo script (drag & drop) in cui trascinando un' immagine sopra un' altra quella precedente (trascinata) spariva.. Avevo pensato di mettere le immagini da trascinare in una pagina che avrei richiamato tramite un iframe, tutto andava bene ma quando tentavo di trascinarla per farla sparire non spariva.. Quindi come faccio a collegare la variabile nella pagina dei "trascinabili" che indica l' immagine che fa sparire a quella dove effettivamente sta? QUesti sono i codici:

Lista di immagini da trascinare:

Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Furni Bye Bye [armadillo]</title>
<script src="http://html5demos.com/js/h5utils.js"></script>
</head>
<body>
<style type="text/css">
li {
  list-style: none;
  float: left;
}

li a {
  text-decoration: none;
  color: transparent;
  width: 120px;
  display: block;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

ul {
  min-height: 300px;
}
}
</style>
<center>
 <ul>
	<li><a id="one" href="#"><img src="img/ambrablu.png"></a></li>
	<li><a href="#" id="two"><img src="img/ambragialla.png"></a></li>
	<li><a href="#" id="three"><img src="img/ambrarossa.png"></a></li>
	<li><a href="#" id="four"><img src="img/parlatoio.png"></a></li>
	<li><a href="#" id="five"><img src="img/amaca.png"></a></li>
	<li><a href="#" id="six"><img src="img/samovar.png"></a></li>
	<li><a href="#" id="seven"><img src="img/lapponia.png"></a></li>
	<li><a href="#" id="eight"><img src="img/estate.png"></a></li>
    	<li><a href="#" id="nine"><img src="img/eleoro.png"></a></li>
	<li><a href="#" id="ten"><img src="img/eleargento.png"></a></li>
	<li><a href="#" id="eleven"><img src="img/ragazzolo.png"></a></li>
	<li><a href="#" id="twelve"><img src="img/ragazzaolo.png"></a></li>
	<li><a href="#" id="thirteen"><img src="img/fontbianca.png"></a></li>
	<li><a href="#" id="fourteen"><img src="img/fontrossa.png"></a></li>
	<li><a href="#" id="fifteen"><img src="img/fongialla.png"></a></li>
	<li><a href="#" id="sixteen"><img src="img/ombverde.png"></a></li>
	<li><a href="#" id="seventeen"><img src="img/ombviola.png"></a></li>
	<li><a href="#" id="eighteen"><img src="img/estate.png"></a></li>
	<li><a href="#" id="nineteen"><img src="img/trono.png"></a></li>
	<li><a href="#" id="twenty"><img src="img/erbetta.png"></a></li>
</ul>
</center>

<script>

  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
  var yum = document.createElement('p');
  var msie = /*@cc_on!@*/0;
  yum.style.opacity = 1;

  var links = document.querySelectorAll('li > a'), el = null;
  for (var i = 0; i < links.length; i++) {
    el = links[i];
  
    el.setAttribute('draggable', 'true');
  
    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
  }

  var secchio = document.querySelector('index.html#secchio');

  addEvent(index.html#secchio, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(sindex.html#ecchio, 'dragenter', function (e) {
    this.className = 'over';
    return false;
  });

  addEvent(index.html#secchio, 'dragleave', function () {
    this.className = '';
  });

  addEvent(index.html#secchio, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));
    
    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    secchio.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    secchio.appendChild(y);

    setTimeout(function () {
      var t = setInterval(function () {
        if (y.style.opacity <= 0) {
          if (msie) { // don't bother with the animation
            y.style.display = 'none';
          }
          clearInterval(t); 
        } else {
          y.style.opacity -= 0.1;
        }
      }, 50);
    }, 250);

    return false;
  });

  </script>
</body>
</html>
Pagina in cui è richiamata la precedente tramite iframe:

Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Furni Bye Bye [armadillo]</title>
<link rel="stylesheet" href="css.css" type="text/css" />
<script src="http://html5demos.com/js/h5utils.js"></script>
<script src="rainbow.js"></script>
</head>
<body>
<center><h1 onmouseover="doRainbow(this);" onmouseout="sdoRainbow(this);">Furni Bye Bye [armadillo]</h1></center>
<style type="text/css">
li {
  list-style: none;
  float: left;
}

li a {
  text-decoration: none;
  color: transparent;
  width: 120px;
  display: block;
}

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

ul {
  min-height: 300px;
}

#secchio {
  background-image: url(img/secchio.png);
  width: 205px;
  height: 210px; 
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  margin-left: auto;
  margin-right: auto;
}

#secchio.over {
  background-image: url(img/secchiohover.gif);
  filter:alpha(opacity=90);
  -moz-opacity: 0.95;
  opacity: 0.9;
}

#secchio p {
  font-weight: bold;
  text-align: center;
  position: absolute;
  width: 166px;
  font-size: 32px;
  color: #000000;
  text-shadow: #000 2px 2px 2px;
}

</style>
<div class="top"></div>
<div class="center">
<div class="copyright">Copyright <? echo(date("Y")); ?> &copy . All rights reserved.</div>
<div id="secchio"></div>
<iframe src="furni.html" width="740" height="200" frameborder="0"></iframe>
</div>
<div class="bottom"></div>
  <script>

  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
  var yum = document.createElement('p');
  var msie = /*@cc_on!@*/0;
  yum.style.opacity = 1;

  var links = document.querySelectorAll('li > a'), el = null;
  for (var i = 0; i < links.length; i++) {
    el = links[i];
  
    el.setAttribute('draggable', 'true');
  
    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
  }

  var secchio = document.querySelector('#secchio');

  addEvent(secchio, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(secchio, 'dragenter', function (e) {
    this.className = 'over';
    return false;
  });

  addEvent(secchio, 'dragleave', function () {
    this.className = '';
  });

  addEvent(secchio, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));
    
    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    secchio.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    secchio.appendChild(y);

    setTimeout(function () {
      var t = setInterval(function () {
        if (y.style.opacity <= 0) {
          if (msie) { // don't bother with the animation
            y.style.display = 'none';
          }
          clearInterval(t); 
        } else {
          y.style.opacity -= 0.1;
        }
      }, 50);
    }, 250);

    return false;
  });

  </script>