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

Line 464: Line 464:
  
 
<section>
 
<section>
−
Seccion Acevedo Interactive Entertainement System Co. S.A. de C.V. Ind.
+
    <style>
 +
        #dropzoneWrapper {
 +
            position: absolute;
 +
            height: auto;
 +
            width: 100%;
 +
            background-color: blue;
 +
        }
 +
        #outer-dropzone {
 +
            height: 80vw;
 +
            width: 80vw;
 +
            touch-action: none;
 +
        }
 +
   
 +
        .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;
 +
            height: 200px;
 +
            width: 200px;
 +
 
 +
            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 img {
 +
            position: absolute;
 +
            height: 200px;
 +
            width: 200px;
 +
            border-radius: 50%;
 +
        }
 +
 
 +
        .drag-drop.can-drop {
 +
            color: #000;
 +
            /*background-color: #4e4;*/
 +
        }
 +
       
 +
        #backgroundHolder {
 +
            width: 80vw;
 +
            height: 80vw;
 +
            position: relative;
 +
            z-index: 1;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
       
 +
        #interactive_Background {
 +
            height: 100%;
 +
        }
 +
       
 +
        #plasmidHolder {
 +
            width: 80vw;
 +
            height: 80vw;
 +
            position: absolute;
 +
            z-index: 3;
 +
            background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_CutPlasmidFull {
 +
            height: 100%;
 +
        }
 +
       
 +
        #colorsWrapper {
 +
            width: 80vw;
 +
            height: 80vw;
 +
            position: absolute;
 +
            z-index: 2;
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
        #color1 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: yellow;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color2 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: red;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color3 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: aqua;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color4 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: pink;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
 
 +
       
 +
    </style>
 +
   
 +
    <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
 +
    <div id="esteban" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 +
    <div id="acebae" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
 +
    <div id="sofi" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
 +
    <div id="bobby" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/a/a9/T--Tec-Monterrey--Foto_Roberto.jpg"> </div>
 +
   
 +
    <div id="dropzoneWrapper">
 +
    <div id="outer-dropzone" class="dropzone">
 +
        <div id="backgroundHolder" style="">
 +
            <div id="colorsWrapper">
 +
                <div id="color1"></div>
 +
                <div id="color2"></div>
 +
                <div id="color3"></div>
 +
                <div id="color4"></div>
 +
            </div>
 +
            <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
 +
            </div>
 +
        </div>
 +
    </div>
 +
    </div>
 +
    <script>
 +
        // target elements with the "draggable" class
 +
        interact('.draggable')
 +
            .draggable({
 +
                // enable inertial throwing
 +
                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,
 +
 
 +
                // call this function on every dragmove event
 +
                onmove: dragMoveListener,
 +
                // call this function on every dragend event
 +
                onend: function(event) {
 +
                    var textEl = event.target.querySelector('p');
 +
 
 +
                    (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');
 +
                }
 +
            });
 +
 
 +
        function dragMoveListener(event) {
 +
            var target = event.target,
 +
                // keep the dragged position in the data-x/data-y attributes
 +
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
 +
                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) {
 +
                // activates when you grab an object
 +
                // add active dropzone feedback
 +
                event.target.classList.add('drop-active');
 +
                //console.log("a");
 +
            },
 +
            ondragenter: function(event) {
 +
                // activates when object enters dropzone
 +
                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';
 +
                //console.log("b");
 +
            },
 +
            ondragleave: function(event) {
 +
                // activates when object leaves dropzone
 +
                // remove the drop feedback style
 +
                event.target.classList.remove('drop-target');
 +
                event.relatedTarget.classList.remove('can-drop');
 +
                //event.relatedTarget.textContent = 'Dragged out';
 +
                //console.log("c");
 +
            },
 +
            ondrop: function(event) {
 +
                // activates when object is dropped in dropzone
 +
                // event.relatedTarget.textContent = 'Dropped';
 +
                var draggableElementID = event.relatedTarget.id;
 +
                if (event.relatedTarget.id == "alan") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color1").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "esteban") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                document.getElementById("color2").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "acebae") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color3").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "sofi") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color4").style.opacity = "1";
 +
                }
 +
                //console.log("d");
 +
            },
 +
            ondropdeactivate: function(event) {
 +
                // activates when you drop an object anywhere
 +
                // remove active dropzone feedback
 +
                event.target.classList.remove('drop-active');
 +
                event.target.classList.remove('drop-target');
 +
                //console.log("e");
 +
            }
 +
        });
 +
 
 +
        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>
 
</section>
 
</section>
  

Revision as of 05:51, 14 October 2018

Skip

E. coding
Tec-Monterrey

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors