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

(Replaced content with "=")
Line 1: Line 1:
−
=
+
<html>
 +
 
 +
<head>
 +
    <script src="https://cdn.jsdelivr.net/npm/interactjs@1.3.4/dist/interact.min.js"></script>
 +
    <script>
 +
        /* 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>
 +
    <style>
 +
        #outer-dropzone {
 +
            height: 140px;
 +
            touch-action: none;
 +
        }
 +
 
 +
        #inner-dropzone {
 +
            height: 80px;
 +
        }
 +
 
 +
        .dropzone {
 +
            background-color: #ccc;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            margin: 10px auto 30px;
 +
            padding: 10px;
 +
            width: 80%;
 +
            transition: background-color 0.3s;
 +
        }
 +
 
 +
        .drop-active {
 +
            border-color: #aaa;
 +
        }
 +
 
 +
        .drop-target {
 +
            background-color: #29e;
 +
            border-color: #fff;
 +
            border-style: solid;
 +
        }
 +
 
 +
        .drag-drop {
 +
            display: inline-block;
 +
            min-width: 40px;
 +
            padding: 2em 0.5em;
 +
 
 +
            color: #fff;
 +
            background-color: #29e;
 +
            border: solid 2px #fff;
 +
 
 +
            -webkit-transform: translate(0px, 0px);
 +
            transform: translate(0px, 0px);
 +
 
 +
            transition: background-color 0.3s;
 +
        }
 +
 
 +
        .drag-drop.can-drop {
 +
            color: #000;
 +
            background-color: #4e4;
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <div id="no-drop" class="drag-drop"> #no-drop </div>
 +
 
 +
    <div id="yes-drop" class="drag-drop"> #yes-drop </div>
 +
 
 +
    <div id="outer-dropzone" class="dropzone">
 +
        #outer-dropzone
 +
        <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
 +
    </div>
 +
</body>
 +
 
 +
</html>

Revision as of 21:59, 12 October 2018

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