Permalink
Browse files

Drag and Drop

  • Loading branch information...
1 parent 4dec9db commit 1c979eea3c409be5c2c0feed7c586f5103231af3 @crisgarner committed Apr 25, 2012
Showing with 70 additions and 24 deletions.
  1. +22 −8 css/style.css
  2. +1 −1 index.html
  3. +47 −15 js/script.js
View
@@ -65,7 +65,9 @@ td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author: crisgarner
========================================================================== */
-
+body,html,#container,#main,#dragzone{
+ height:100%;
+}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
@@ -87,16 +89,20 @@ header,body,html,#main{
#dragzone{
display: block;
- height:700px;
background-color:purple;
- width:700px;
- margin:200px;
+ margin-left :200px;
}
#dragarea{
- widht:150px;
+ width:150px;
margin: 0 0px 0px 0px;
padding: 0px 0px 0px 0px;
+ float: left;
+ height:100%;
+}
+
+#dragarea ul {
+ padding: 0;
}
@@ -120,7 +126,8 @@ li{
height:120px;
display: block;
float:left;
- margin-left:40px;
+ margin-left:20px;
+ margin-right:20px;
background:yellow;
}
@@ -129,7 +136,8 @@ li{
height:120px;
display: block;
float:left;
- margin-left:40px;
+ margin-left:20px;
+ margin-right:20px;
background:red;
}
@@ -138,10 +146,16 @@ li{
height:120px;
display: block;
float:left;
- margin-left:40px;
+ margin-left:20px;
+ margin-right:20px;
background:blue;
}
+#dragzone .blue-drag,#dragzone .red-drag,#dragzone .yellow-drag{
+ position: absolute;
+ margin:0;
+}
+
View
@@ -26,7 +26,7 @@
<header>
</header>
- <div id="main" role="main">
+ <div id="main" role="main" class="clearfix">
<div id ="dragarea" class="clearfix">
<ul>
<li class="red-drag drag-item" draggable="true"></li>
View
@@ -76,13 +76,15 @@ document.getElementById('leo').ondragstart = empezar;
document.getElementById('testo').ondrop = soltar;
*/
-//variable
+//variables
var dragSrcEl = null;
+var pickX = null;
+var pickY = 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('dragover',handleDragOver,false);
col.addEventListener('dragend', handleDragEnd, false);
});
@@ -93,29 +95,30 @@ dragzone.addEventListener('dragleave',handleDragLeave,false);
dragzone.addEventListener('drop',handleDrop,false);
-
+//cuando agarra el elemento
function handleDragStart(e) {
if(e.target.classList[1] == "drag-item"){
- this.style.opacity = '0.4'; // this / e.target is the source node.
+ this.style.opacity = '0.4';
dragSrcEl = e;
+ var style = window.getComputedStyle(e.target, null);
+ pickX = e.offsetX;
+ pickY = e.offsetY;
+ console.log(pickX);
+ }else{
+ dragSrcEl = null;
}
-
- /*e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/html', this.innerHTML);*/
}
-//TODOO Fix bug
+//cuando esta encima del elemento
function handleDragOver(e) {
- console.log();
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
- if(this.id=="dragzone"){
+ if(this.id=="dragzone" && dragSrcEl != null && e.offsetX > pickX){
this.classList.add('over');
}else{
- dragzone.classList.remove("over")
+ dragzone.classList.remove('over');
}
-
// e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
@@ -144,15 +147,23 @@ function handleDrop(e) {
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);
+ if (e.target.id == "dragzone" && e.offsetX > pickX) {
// 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]);
+ newdiv.setAttribute('draggable',"false");
+ newdiv.style.left = (event.clientX-pickX) + 'px';
+ newdiv.style.top = (event.clientY-pickY)+'px';
+
dragzone.appendChild(newdiv);
+
+ newdiv.addEventListener('dragstart',drag_start_move,false);
+ dragzone.addEventListener('dragover',drag_over_move,false);
+ dragzone.addEventListener('drop',drop_move,false);
dragSrcEl = null;
+ pickX = 0;
+ pickY = 0;
}
return false;
@@ -170,6 +181,27 @@ function handleDragEnd(e) {
}
+function drag_start_move(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_move(event) {
+ event.preventDefault();
+ return false;
+}
+
+function drop_move(event) {
+ 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;
+}
+

0 comments on commit 1c979ee

Please sign in to comment.