box drags

css/style.css

@@ -73,6 +73,13 @@ td { vertical-align: top; }
   user-select: none;
 }
 
+
+#dragzone.over {
+  border: 2px dashed pink;
+}
+
+
+
 header,body,html,#main{
   margin:0;
   padding: 0;
@@ -81,7 +88,7 @@ header,body,html,#main{
 #dragzone{
   display: block;
   height:700px;
-  background-color:red;
+  background-color:purple;
   width:700px;
   margin:200px;
 }
@@ -95,11 +102,11 @@ header,body,html,#main{
 
 
 
-#dragme { 
+#dragme {
     position:  relative;
     left: 120px;
     top: 0;
-    width: 200px; 
+    width: 200px;
     background: url(../img/cristian.jpg) no-repeat;
     height:200px;
 }​
@@ -113,7 +120,7 @@ li{
   height:120px;
   display: block;
   float:left;
-  margin-right:20px;  
+  margin-left:40px;
   background:yellow;
 }
 
@@ -122,7 +129,7 @@ li{
   height:120px;
   display: block;
   float:left;
-  margin-right:20px;  
+  margin-left:40px;
   background:red;
 }
 
@@ -131,7 +138,7 @@ li{
   height:120px;
   display: block;
   float:left;
-  margin-right:20px;  
+  margin-left:40px;
   background:blue;
 }
 
@@ -178,13 +185,13 @@ li{
 
 
 /* ==|== print styles ======================================================= */
- 
+
 @media print {
-  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
   a, a:visited { text-decoration: underline; }
   a[href]:after { content: " (" attr(href) ")"; }
   abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
   thead { display: table-header-group; }
   tr, img { page-break-inside: avoid; }

index.html

@@ -56,6 +56,6 @@
     <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
     <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
   <![endif]-->
-  
+
 </body>
 </html>

js/script.js

@@ -1,33 +1,33 @@
-/* Author: 
+/* Author:
 
 */
 /*
 function drag_start(event) {
-	
+
     var style = window.getComputedStyle(event.target, null);
     event.dataTransfer.setData("text/plain",
     (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
-} 
+}
 
-function drag_over(event) { 
-    event.preventDefault(); 
-    return false; 
-} 
+function drag_over(event) {
+    event.preventDefault();
+    return false;
+}
 
-function drop(e) { 
+function drop(e) {
 	 var caller = e || e.srcElement;
     var offset = event.dataTransfer.getData("text/plain").split(',');
     var dm = document.getElementById(this.id);
     dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
     dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
     event.preventDefault();
     return false;
-} 
+}
 
-var dm = document.getElementById('dragme'); 
-dm.addEventListener('dragstart',drag_start,false); 
-document.body.addEventListener('dragover',drag_over,false); 
-document.body.addEventListener('drop',drop,false); 
+var dm = document.getElementById('dragme');
+dm.addEventListener('dragstart',drag_start,false);
+document.body.addEventListener('dragover',drag_over,false);
+document.body.addEventListener('drop',drop,false);
 
 
 
@@ -52,17 +52,17 @@ function soltar (e ) {
 //Indicamos el producto que ha comprado
 //creamos una imagen
 
-var newdiv = document.createElement('div'); 
+var newdiv = document.createElement('div');
 newdiv.setAttribute('id', "dragme2")
 //La imagen será igual a la que arrastramos
 //añadimos la imagen a la lista
 document.getElementById('testo').appendChild(newdiv);
 
- 
+
 newdiv.draggable="true";
-newdiv.addEventListener('dragstart',drag_start,false); 
-document.body.addEventListener('dragover',drag_over,false); 
-document.body.addEventListener('drop',drop,false); 
+newdiv.addEventListener('dragstart',drag_start,false);
+document.body.addEventListener('dragover',drag_over,false);
+document.body.addEventListener('drop',drop,false);
 
 }
 
@@ -76,15 +76,100 @@ document.getElementById('leo').ondragstart = empezar;
 document.getElementById('testo').ondrop = soltar;
 */
 
-function handleDragStart(e) {
-  this.style.opacity = '0.4';  // this / e.target is the source node.
-}
+//variable
 
+var dragSrcEl = null;
 var cols = document.querySelectorAll('ul .drag-item');
 [].forEach.call(cols, function(col) {
   col.addEventListener('dragstart', handleDragStart, false);
+  col.addEventListener('dragover', handleDragOver, false);
+  col.addEventListener('dragend', handleDragEnd, false);
 });
 
+var dragzone = document.getElementById('dragzone');
+dragzone.addEventListener('dragenter',handleDragEnter,false);
+dragzone.addEventListener('dragover',handleDragOver,false);
+dragzone.addEventListener('dragleave',handleDragLeave,false);
+dragzone.addEventListener('drop',handleDrop,false);
+
+
+
+function handleDragStart(e) {
+  if(e.target.classList[1] == "drag-item"){
+    this.style.opacity = '0.4';  // this / e.target is the source node.
+    dragSrcEl = e;
+  }
+
+  /*e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);*/
+}
+
+//TODOO Fix bug
+function handleDragOver(e) {
+  console.log();
+  if (e.preventDefault) {
+    e.preventDefault(); // Necessary. Allows us to drop.
+  }
+  if(this.id=="dragzone"){
+    this.classList.add('over');
+  }else{
+    dragzone.classList.remove("over")
+  }
+
+ // e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
+
+  return false;
+}
+
+function handleDragEnter(e) {
+  // this / e.target is the current hover target.
+  if(dragSrcEl != null){
+    this.classList.add('over');
+  }else{
+      this.classList.remove('over');
+  }
+
+}
+
+function handleDragLeave(e) {
+  if(this.id =="dragzone"){
+    this.classList.remove('over');
+  }
+   // this / e.target is previous target element.
+}
+
+function handleDrop(e) {
+  // this/e.target is current target element.
+
+  if (e.stopPropagation) {
+    e.stopPropagation(); // Stops some browsers from redirecting.
+  }
+
+  // Don't do anything if dropping the same column we're dragging.
+  if (e.target.id == "dragzone" && dragSrcEl != null) {
+    console.log(dragSrcEl);
+    // Set the source column's HTML to the HTML of the columnwe dropped on.
+    var newdiv = document.createElement('div');
+    newdiv.setAttribute('class', dragSrcEl.target.classList[0]);
+    dragzone.appendChild(newdiv);
+    dragSrcEl = null;
+  }
+
+  return false;
+}
+
+function handleDragEnd(e) {
+  // this/e.target is the source node.
+    this.style.opacity = '1';
+
+    dragzone.classList.remove('over');
+
+    //obtengo el color y creo el div
+    //var color = e.target.classList[0].split("-")[0];
+
+}
+
+