How do you make an element draggable?

8

Hello d13,

there are a few disadvantages using third party js-libraries for element positioning:

  • hypes framerate will be reduced by factor 2
  • increased loading time
  • possible incompatibilities with hypes runtime

in your example you load jquery -> 80kb, jqueryui -> 240kb and you’ll additionally need the js touchpunch (hack) to make it work on mobiles. turn off css-positioning and your setup will fail. turn on responsiveness and your setup will fail.

this example will work with a completely hypesetup. theres only 2kb of code instead of 320kb++. you can use hypes own capabilities for anymating stuff. as long as you don’t need third party libraries i would always rely on hype! YouMayNotNeedJQuery :wink:

this’ll be the js-setup for ondrag of all elements to achieve the same:

//create a global object within hypes scope and append the result counter
    if(typeof hypeDocument[hypeDocument.documentId()] === 'undefined'){
    hypeDocument[hypeDocument.documentId()] = new Object(); 
    hypeDocument[hypeDocument.documentId()]['resCount'] = 0;
    };
    
    //HTMLCollection to check against
    var droppables = hypeDocument.currentSceneElement().getElementsByClassName(element.id);
    
    /*
    initialize and call the hittest. arguments: sourceElement and HTMLCollection
    returns
    HTMLElementObject, its id, its classList
    */
    var hitCheck = hypeDocument.checkOverlapping(element, droppables);
    
    
    //on dragstart store the hypeproperties of the sourcElement
    if(event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseStart)
    {
    //store the properties to reset draggable on no drop occured
    hypeDocument.storeProperties(element);
    }
    
    
    // on move reset the opacity of all droppables, call hitCheck
    if(event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseMove)
    {
    resetDroppables();
    if(hitCheck)hypeDocument.setElementProperty(hitCheck.element, 'opacity', 0.5);  
    }

    // on end of the drag call hitCheck ... do sthg.
    if(event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseEnd)
    {
    if(hitCheck){
    hypeDocument.setElementProperty(element, 'left', hypeDocument.getElementProperty(hitCheck.element, 'left'), 0.3, 'easeinout');
    hypeDocument.setElementProperty(element, 'top', hypeDocument.getElementProperty(hitCheck.element, 'top'), 0.3, 'easeinout');
    hypeDocument[hypeDocument.documentId()]['resCount']++;
    if(hypeDocument[hypeDocument.documentId()]['resCount'] === 3){hypeDocument.getElementById('message').innerHTML = "You may not need JQuery ;-)"}
    }else{
    hypeDocument.resetProperties(element);
    }
    }
    
function resetDroppables()
{
var l = droppables.length
while(l--)
{
hypeDocument.setElementProperty(droppables[l], 'opacity', 1); 
}

dragAndDropHypeStyle.hype.zip (23.8 KB)

7 Likes