Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
−
 
+
<html lang="en">
 
<head>
 
<head>
−
     <script src="https://cdn.jsdelivr.net/npm/interactjs@1.3.4/dist/interact.min.js"></script>
+
    <meta charset="UTF-8">
−
     <script>
+
    <title>Drag Drop Demo</title>
−
         /* The dragging code for '.draggable' from the demo above
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
−
        * applies to this demo as well so it doesn't have to be repeated. */
+
     <style>
 +
         #outer-dropzone {
 +
  height: 140px;
  
−
        // enable draggables to be dropped into this
+
  touch-action: none;
−
        interact('.dropzone').dropzone({
+
}
−
            // only accept elements matching this CSS selector
+
−
            accept: '#yes-drop',
+
−
            // Require a 75% element overlap for a drop to be possible
+
−
            overlap: 0.75,
+
  
−
            // listen for drop related events:
+
#inner-dropzone {
 +
  height: 80px;
 +
}
  
−
            ondropactivate: function(event) {
+
.dropzone {
−
                // add active dropzone feedback
+
  background-color: #ccc;
−
                event.target.classList.add('drop-active');
+
  border: dashed 4px transparent;
−
            },
+
  border-radius: 4px;
−
            ondragenter: function(event) {
+
  margin: 10px auto 30px;
−
                var draggableElement = event.relatedTarget,
+
  padding: 10px;
−
                    dropzoneElement = event.target;
+
  width: 80%;
 +
  transition: background-color 0.3s;
 +
}
  
−
                // feedback the possibility of a drop
+
.drop-active {
−
                dropzoneElement.classList.add('drop-target');
+
  border-color: #aaa;
−
                draggableElement.classList.add('can-drop');
+
}
−
                draggableElement.textContent = 'Dragged in';
+
−
            },
+
−
            ondragleave: function(event) {
+
−
                // remove the drop feedback style
+
−
                event.target.classList.remove('drop-target');
+
−
                event.relatedTarget.classList.remove('can-drop');
+
−
                event.relatedTarget.textContent = 'Dragged out';
+
−
            },
+
−
            ondrop: function(event) {
+
−
                event.relatedTarget.textContent = 'Dropped';
+
−
            },
+
−
            ondropdeactivate: function(event) {
+
−
                // remove active dropzone feedback
+
−
                event.target.classList.remove('drop-active');
+
−
                event.target.classList.remove('drop-target');
+
−
            }
+
−
        });
+
  
−
        interact('.drag-drop')
+
.drop-target {
−
            .draggable({
+
  background-color: #29e;
−
                inertia: true,
+
  border-color: #fff;
−
                restrict: {
+
  border-style: solid;
−
                    restriction: "parent",
+
}
−
                    endOnly: true,
+
−
                    elementRect: {
+
−
                        top: 0,
+
−
                        left: 0,
+
−
                        bottom: 1,
+
−
                        right: 1
+
−
                    }
+
−
                },
+
−
                autoScroll: true,
+
−
                // dragMoveListener from the dragging demo above
+
−
                onmove: dragMoveListener,
+
−
            });
+
−
    </script>
+
−
    <style>
+
−
        #outer-dropzone {
+
−
            height: 140px;
+
−
            touch-action: none;
+
−
        }
+
  
−
        #inner-dropzone {
+
.drag-drop {
−
            height: 80px;
+
  display: inline-block;
−
        }
+
  min-width: 40px;
 +
  padding: 2em 0.5em;
  
−
        .dropzone {
+
  color: #fff;
−
            background-color: #ccc;
+
  background-color: #29e;
−
            border: dashed 4px transparent;
+
  border: solid 2px #fff;
−
            border-radius: 4px;
+
−
            margin: 10px auto 30px;
+
−
            padding: 10px;
+
−
            width: 80%;
+
−
            transition: background-color 0.3s;
+
−
        }
+
  
−
        .drop-active {
+
  -webkit-transform: translate(0px, 0px);
−
            border-color: #aaa;
+
          transform: translate(0px, 0px);
−
        }
+
  
−
        .drop-target {
+
  transition: background-color 0.3s;
−
            background-color: #29e;
+
}
−
            border-color: #fff;
+
−
            border-style: solid;
+
−
        }
+
  
−
        .drag-drop {
+
.drag-drop.can-drop {
−
            display: inline-block;
+
  color: #000;
−
            min-width: 40px;
+
  background-color: #4e4;
−
            padding: 2em 0.5em;
+
}
 +
  </style>
 +
</head>
 +
<body>
 +
    <div id="no-drop" class="drag-drop"> #no-drop </div>
  
−
            color: #fff;
+
<div id="yes-drop" class="drag-drop"> #yes-drop </div>
−
            background-color: #29e;
+
−
            border: solid 2px #fff;
+
  
−
            -webkit-transform: translate(0px, 0px);
+
<div id="outer-dropzone" class="dropzone">
−
            transform: translate(0px, 0px);
+
  #outer-dropzone
 +
  <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
 +
</div>
  
−
            transition: background-color 0.3s;
 
−
        }
 
  
−
         .drag-drop.can-drop {
+
    <script>
−
            color: #000;
+
         // target elements with the "draggable" class
−
            background-color: #4e4;
+
interact('.draggable')
−
        }
+
  .draggable({
−
     </style>
+
    // enable inertial throwing
−
</head>
+
    inertia: true,
 +
    // keep the element within the area of it's parent
 +
    restrict: {
 +
      restriction: "parent",
 +
      endOnly: true,
 +
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
 +
     },
 +
    // enable autoScroll
 +
    autoScroll: true,
  
−
<body>
+
    // call this function on every dragmove event
−
     <div id="no-drop" class="drag-drop"> #no-drop </div>
+
    onmove: dragMoveListener,
 +
     // call this function on every dragend event
 +
    onend: function (event) {
 +
      var textEl = event.target.querySelector('p');
  
−
    <div id="yes-drop" class="drag-drop"> #yes-drop </div>
+
      textEl && (textEl.textContent =
 +
        'moved a distance of '
 +
        + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
 +
                    Math.pow(event.pageY - event.y0, 2) | 0))
 +
            .toFixed(2) + 'px');
 +
    }
 +
  });
  
−
     <div id="outer-dropzone" class="dropzone">
+
  function dragMoveListener (event) {
−
         #outer-dropzone
+
     var target = event.target,
−
         <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
+
         // keep the dragged position in the data-x/data-y attributes
−
    </div>
+
         x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
−
</body>
+
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
 +
    // translate the element
 +
    target.style.webkitTransform =
 +
    target.style.transform =
 +
      'translate(' + x + 'px, ' + y + 'px)';
 +
 +
    // update the posiion attributes
 +
    target.setAttribute('data-x', x);
 +
    target.setAttribute('data-y', y);
 +
  }
 +
       
 +
       
 +
    /* The dragging code for '.draggable' from the demo above
 +
* applies to this demo as well so it doesn't have to be repeated. */
 +
 +
// enable draggables to be dropped into this
 +
interact('.dropzone').dropzone({
 +
  // only accept elements matching this CSS selector
 +
  accept: '#yes-drop',
 +
  // Require a 75% element overlap for a drop to be possible
 +
  overlap: 0.75,
 +
 +
  // listen for drop related events:
 +
 +
  ondropactivate: function (event) {
 +
    // add active dropzone feedback
 +
    event.target.classList.add('drop-active');
 +
  },
 +
  ondragenter: function (event) {
 +
    var draggableElement = event.relatedTarget,
 +
        dropzoneElement = event.target;
 +
 +
    // feedback the possibility of a drop
 +
    dropzoneElement.classList.add('drop-target');
 +
    draggableElement.classList.add('can-drop');
 +
    draggableElement.textContent = 'Dragged in';
 +
  },
 +
  ondragleave: function (event) {
 +
    // remove the drop feedback style
 +
    event.target.classList.remove('drop-target');
 +
    event.relatedTarget.classList.remove('can-drop');
 +
    event.relatedTarget.textContent = 'Dragged out';
 +
  },
 +
  ondrop: function (event) {
 +
    event.relatedTarget.textContent = 'Dropped';
 +
  },
 +
  ondropdeactivate: function (event) {
 +
    // remove active dropzone feedback
 +
    event.target.classList.remove('drop-active');
 +
    event.target.classList.remove('drop-target');
 +
  }
 +
});
 +
 +
interact('.drag-drop')
 +
  .draggable({
 +
    inertia: true,
 +
    restrict: {
 +
      restriction: "parent",
 +
      endOnly: true,
 +
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
 +
    },
 +
    autoScroll: true,
 +
    // dragMoveListener from the dragging demo above
 +
    onmove: dragMoveListener,
 +
  });
 +
    </script>
 +
</body>
 
</html>
 
</html>

Revision as of 13:58, 13 October 2018

<!DOCTYPE html> Drag Drop Demo

#no-drop
#yes-drop
#outer-dropzone
#inner-dropzone