Responsive drag and drop

Hva

Vi lager et ikke helt trivielt eksempel på drag and drop

Drag

Du kan enten se på denne siden i nettleseren "responsive view" med touch-emulering eller du kan åpne siden i en touch-skjerm eller du kan gjøre det samme med en litt enklere side:
ddevents.html https://borres.hiof.no/respons/eventcase1/ddevents.html

Noen hit

og noen hit

Det er to javascriptfiler involvert. Et objekt som tar seg av draggingen, både mus og touch

// dragger
// mouse and touch
Dragger = {
    initialMouseX: undefined,
    initialMouseY: undefined,
    startX: undefined,
    startY: undefined,
    draggedObject:undefined,
    MAX_Z_INDEX:1,
    
    initElement: function (elt) {
        elt.addEventListener("mousedown",Dragger.startDragMouse,false);
        elt.addEventListener("touchstart",Dragger.startDragFinger,false);        
        if (elt.style.zIndex)
        {
            thisIndex=element.style.zIndex;
            if (thisIndex > Dragger.MAX_Z_INDEX)
                Dragger.MAX_Z_INDEX=thisIndex;
        }
    },
    clearElement: function (obj){
        obj.removeEventListener("mousedown",Dragger.startDragMouse,false);
        document.removeEventListener("mousemove",Dragger.dragMouse,false);
        document.removeEventListener("mouseup",Dragger.releaseElement,false);
        obj.removeEventListener("touchstart",Dragger.startDragFinger,false);
        obj.removeEventListener("touchmove",Dragger.dragFinger,false);
        obj.removeEventListener("touchend",Dragger.releaseElement,false);
    },
    resetElement:function(obj){
        Dragger.setPosition(0,0);
        document.removeEventListener("mousemove",Dragger.dragMouse,false);
        document.removeEventListener("mouseup",Dragger.releaseElement,false);
        obj.removeEventListener("touchmove",Dragger.dragFinger,false);
        obj.removeEventListener("touchend",Dragger.releaseElement,false);
    }
    ,
    startDragFinger:function(evt){
        var obj=evt.changedTouches[0].target;
        Dragger.startDrag(obj);
        
        Dragger.initialMouseX = evt.changedTouches[0].clientX;
        Dragger.initialMouseY = evt.changedTouches[0].clientY;
        obj.addEventListener("touchmove",Dragger.dragFinger,false);
        obj.addEventListener("touchend",Dragger.releaseElement,false);
        evt.preventDefault();
        evt.stopPropagation();
        Dragger.mark();
        return false;
    }
    ,
    startDragMouse: function (evt) {
        Dragger.startDrag(evt.target);
        Dragger.initialMouseX = evt.clientX;
        Dragger.initialMouseY = evt.clientY;
        document.addEventListener("mousemove",Dragger.dragMouse,false);
        document.addEventListener("mouseup",Dragger.releaseElement,false);
        evt.stopPropagation();
        return false;
    },
    startDrag: function (obj) {
        if (Dragger.draggedObject)
            Dragger.clearElement(Dragger.draggedObject);
        
        Dragger.startX = obj.offsetLeft;
        Dragger.startY = obj.offsetTop;
        
        Dragger.draggedObject = obj;
        obj.classList.add("dragged");
        Dragger.draggedObject.style.zIndex=Dragger.MAX_Z_INDEX+1;
        Dragger.MAX_Z_INDEX=Dragger.MAX_Z_INDEX+1;
        Dragger.mark();
    },
    dragMouse: function (evt) {
        if(!Dragger.draggedObject)
            return false;
        var dX = evt.clientX - Dragger.initialMouseX;
        var dY = evt.clientY - Dragger.initialMouseY;
        Dragger.setPosition(dX,dY);
        return false;
    },
    dragFinger: function (evt) {
        if(!Dragger.draggedObject)
            return false;
        var dX = evt.changedTouches[0].clientX - Dragger.initialMouseX;
        var dY = evt.changedTouches[0].clientY - Dragger.initialMouseY;
        Dragger.setPosition(dX,dY);
        evt.preventDefault();
        //return false;
    },
    setPosition: function (dx,dy) {
        Dragger.draggedObject.style.left = Dragger.startX + dx + 'px';
        Dragger.draggedObject.style.top = Dragger.startY + dy + 'px';
    },
    releaseElement: function() {
        if(Dragger.draggedObject){
            Dragger.draggedObject.classList.remove("dragged")
            // where did it drop
            Dragger.drop(Dragger.draggedObject);
        }
        Dragger.draggedObject = null;
    },
    // default dropper, should be changed by using code
    drop:function(){
        Dragger.resetElement(Dragger.draggedObject);
    },
    // default marker
    mark:function(){
    }
}

Kode som bruker dragger-objektet og tar seg avplassering av elementer.

// the dragging functionality
var dragger;
// select and adjust dragger functionality
function initDragger(){
    dragger=Dragger;
    // we can plant/override functions in dragger
    // default drop is reset
    dragger.drop=function(){
        var obj=dragger.draggedObject;
        var L=parseInt(obj.style.left);
        var T=parseInt(obj.style.top);
        // are the moving card inside one of 
        // the two dropcontainers ?
        // top
        var box=getBox(document.getElementById("top"));
        if((L > box.left) &&( L< box.right)
           &&(T>box.top)&&(T<box.bottom)){
               document.getElementById("top").appendChild(obj);
               return;
        }
        // bottom
        var box=getBox(document.getElementById("bottom"));
        if((L > box.left) &&( L< box.right)
           &&(T>box.top)&&(T<box.bottom)){
               document.getElementById("bottom").appendChild(obj);
               return;
        }
        // set it back
        dragger.resetElement(obj);
    }
}

function setUp(){
    initDragger();
    // fill middle container with 10 draggable objects
    topList=[];
    middleList=[];
    bottomList=[];
    var cont=document.getElementById("middle");
    for(var ix=0;ix <10;ix++){
        var elt=document.createElement("div");
        elt.appendChild(document.createTextNode(''+ix));
        elt.classList.add("dragme");
        cont.appendChild(elt);
    }
    
    var movers=document.querySelectorAll(".dragme");
    for(var ix=0;ix < movers.length;ix++){
        dragger.initElement(movers[ix]);
    }        
}
function isobjInArea(obj,container){
    var L=parseInt(obj.style.left);
    var T=parseInt(obj.style.top);
    var rect=getBox(container);
    if((T > rect.top)&& (T+CardH < rect.bottom))
        return true;
    return false;
}
//--------------------------
// get box size, any box
// get offset for an element when window scrolled
function getOffset( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        x += el.offsetLeft - el.scrollLeft;
        y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top:y, left: x };
}
// get actual position for a box (any element)
function getBox(elt){
    // refined with scroll correction
    var tl=getOffset( elt );
    var bx=elt.getBoundingClientRect();
    return {
        "top":tl.top,
        "left":tl.left,
        "right":tl.left+(bx.right-bx.left),
        "bottom":tl.top+(bx.bottom-bx.top)
        }
    // simple (no-scroll aware) version
    //return elt.getBoundingClientRect();
}

Stilsettet er ganske enkelt:

@media screen{
    .container{
        display:flex;display: -webkit-flex;
        flex-flow: row;-webkit-flex-flow: row;
        justify-content: center;
        -webkit-justify-content: center;
        min-height:70px;
        min-width:100px;max-width:90%;
        padding:5px
    }
    .dragme{
        height:40px; width:40px;
        text-align:center;
        border: solid thin black;
        background-color:yellow;
        font-size:2em;
        cursor:pointer
    }
    .dragged{
        position:absolute;
        background-color:red
    }
}