spec-view-2

by sanford

HTML

<div class="selected" ><img src="http://placehold.it/175x150/808080/a2a2af"></div>
<div class="suggested"><img src="http://flickholdr.com/150/150/barrel"></div>
<div dropzone="move string:text/plain" class="suggested" ><img src="http://placekitten.com/g/150/150"></div>
<div class="suggested"><img src="http://placehold.it/175x150/592929"></div>
<div class="suggested"><img src="http://flickholdr.com/150/150"></div>
<div class=""><img src="http://placekitten.com/g/150/150"></div><div class=""><img src="http://placekitten.com/g/150/150"></div>

CSS

BODY { padding: 40px; background-color: #f2f2f2;}

DIV {
    background-color: #fefefe;
    ZZoutline: 1px solid red;
    border: 1px solid gray;
    /*
    border-top-color: transparent;
    border-right-color: gray;
    border-bottom-color: transparent;
    border-left-color: transparent;
    */
    position:relative;
    z-index: 10;
    ZZdisplay: inline-block;
    float:left;

    -webkit-transition: all 399ms ease;
    height: 200px;
    width: 200px;
    margin: 0 30px 30px 0;
}
DIV:nth-child(4n + 1) {
    clear: left;
}
IMG {
   vertical-align: top;
    z-index:-1;
    position:relative;
}
DIV:after, DIV:before{
    display: block;
    position: absolute;
    border-style: solid;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    right: -1px;
    bottom: -1px;
    z-index: 20;
    text-indent: -135px;
    -webkit-transition: all 399ms ease;

}

DIV:before {
    height: 30px;
    width: 30px;
    border-width: 14px ;
    content: "";
}
DIV:after {
    left: -22px;
    top: -7px;
    content: "";
    border-width: 0;
    -webkit-border-radius: 1px;
    border-top: 5px solid rgb(102,150,222) !important;
    border-bottom: 5px solid rgb(102,150,222) !important;
    border-left: 5px solid #f2f2f2 !important;
    border-right: 5px solid #f2f2f2 !important;
    display:block;
    height: 102%;
    width: 1px;
    background-color: rgb(102,180,222);
    background-image: url(http://127.0.0.1/otherpeople/f2_dash.gif);
    ZZ-webkit-box-shadow: 1px 1px 10px #888;
    
    
}


DIV:after,DIV:before {
    border-color: transparent;
}
DIV.suggested:before {
    border-color: rgb(200,100,53);
    content: "SUGGESTED Image";
}
DIV.suggested:before, DIV.selected:before {
    color: #494949;
    font: 10px/64px arial;
    text-align:left;
    text-indent: -150px;
}
DIV.selected:before {
    border-color: rgb(53,200,53);
    ZZborder-color: rgba(50,200,30,.9);
    content: "SELECTED Image!";
}


/*
DIV:hover:after {
    height:...

JavaScript

Element.NativeEvents.dragstart = 
Element.NativeEvents.dragover = 
Element.NativeEvents.dragenter = Element.NativeEvents.drop = 2;
$$('DIV').addEvents({
    
dragstart:
    function(e){

e.event.dataTransfer.effectAllowed='move';
    // console.log(e.event.dataTransfer);

e.event.dataTransfer.setData("text", "blee");
        //debugger;        
this.setStyle('borderStyle','dotted');
    },
        dragover:function(e){
        e.stop();
        //console.log(e);
e.event.target.src
    ? e.event.dataTransfer.dropEffect = 'move'
    : e.event.dataTransfer.dropEffect = 'none'
    
    ;
},
    dragenter: function(e){
    // console.log(e);
},
    drop:function(e){
     e.stop();
console.log(e.event.target.src);  
console.log(e.event.dataTransfer.getData('text'))    },
    dragenter:
    function(e){}
    }      
        
        );
/*

$$('DIV')[0].addEventListener('dragstart',
function(e) {   
e.dataTransfer.setData("text/plain", "43");
console.log(e.dataTransfer.getData("text/plain"));
    console.log(e.dataTransfer.types[0]);
});
    
$$('DIV')[1].addEventListener('drop',
    function(e)
{
    console.log(e.dataTransfer.getData("text/plain"));
});
*/