Enyo DND test

Enyo dragAvatar

by EDWIN MAURICIO QUISHPE MALDONADO

CSS

.blocks {
    position:absolute;
    width:50px;
    height:50px;
    border:solid 1px red;
}
.container {
    width:200px;
    height:200px;
    border-top:solid 5px blue;
    border-bottom:solid 2px blue;
    border-left:solid 1px blue;
    border-right:solid 11px blue;
}

JavaScript

enyo.kind({
    name: "Drag",
    kind: enyo.Control,
    components: [{
        kind: "enyo.DragContainer",
        classes: "container",
        components: [{
            kind: "enyo.Drag",
            content: "drag me 1",
            classes: "blocks",
            //style: "left: 0px"
        }, {
            kind: "enyo.Drag",
            content: "drag me 2",
            classes: "blocks",
            style: "left: 80px" //just to be seperate
        }]
    }],
})
enyo.kind({
    name: "enyo.DragContainer",
    kind: enyo.Control,
    create: function () {
        this.inherited(arguments);
        c = this;
    }
})
enyo.kind({
    name: "enyo.Drag",
    kind: enyo.Control,
    published: {
        startX: "",
        startY: "",
        offsetX: "",
        offsetY: ""
    },
    handlers: {

        ondown: 'handleDown',
        ondrag: 'handleDrag',
    },

    handleDrag: function (inSender, inEvent) {

        //handling dragging event should only be applied to draggable items
        if (inSender.kind == "enyo.Drag") {
            //this is the actual dragging updates 
            inSender.setBounds({
                left: this.offsetX + inEvent.pageX - this.startX,
                top: this.offsetY + inEvent.pageY - this.startY
            });
            //if we drag to left edge, stop within the conatiner borders
            //this.maxL (max drag left) is computed in the mousedown event handler
            if (inSender.getBounds().left < this.maxL) {
                //stop at left edge of contaimner
                inSender.setBounds({
                    left: this.maxL
                }, "px")
                //if we drag to right edge, stop within the conatiner borders
                //this.maxC_L (max container left) is computed in the mousedown //event handler    
            } else if (inSender.getBounds().left >= this.maxL) {
                maxX = (this.maxC_L - inSender.getBounds().width);

                if (inSender.getBounds().left...