DND Native ANYO

La aplicación aplica dang and drop nativo permitiendo enviar datos mediante datatransfer

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<body class="enyo-unselectable">
</body>

CSS

.drag-object{
	position: absolute; 
	left: 50px; 
	top: 50px;
    width:48px;
    height: 48px;
	z-index: 1;
    min-height: 48px;
    background-color: #333;
    margin: 2px;
    border: 2px solid #333;
    border-radius: 5px
}
.drop-target {
	position: absolute;
	top: 200px;
	left: 0px;
	right: 0px;
	bottom: 0px; 
	background-color: olive;
}

JavaScript

enyo.ready(function() {
    enyo.kind({
        name: "AppDrag",		
		native: true,
		components: [
			{name: "dragobject", classes: "drag-object"},
			{name: "droptarget", classes: "drop-target"}
		],		
		
		rendered: function() {
			this.inherited(arguments);
			
			if (this.native) {	
				if (this.$.dragobject.hasNode()) 
				{
					this.$.dragobject.setNodeProperty("draggable", true);
					enyo.dispatcher.listen(this.$.dragobject.node, "dragstart", enyo.bind(this, 'nativedragstart'));
				}
				if (this.$.droptarget.hasNode()) {
					enyo.dispatcher.listen(this.$.droptarget.node, "dragover", enyo.bind(this, 'nativedragover'));
					enyo.dispatcher.listen(this.$.droptarget.node, "drop", enyo.bind(this, 'nativedrop'));
				}
			}	
			else {
				//this.$.dragobject.setNodeProperty("draggable", true);
				this.$.dragobject.handlers.ondragstart = "enyodragstart";
				this.$.dragobject.handlers.ondrag = "enyodrag";
				this.$.dragobject.handlers.ondragfinish = "enyodragfinish";
			}
		},
		
		enyodragstart: function (sender, ev) {
			console.log ("enyodragstart");
			this.dragHelper(ev);
		},
		enyodrag: function(sender, ev) {
			console.log ("enyodrag");
			this.dragHelper(ev);
		},
		enyodragfinish: function(sender, ev) {
			console.log ("enyodragfinish");
			this.dragHelper(ev);
		},
		nativedragstart : function (ev) {
			console.log("nativedragstart")
			//ev.dataTransfer.setData("text", ev.target.id);
            ev.dataTransfer.setData("text", "MyKind for build");
		},
		nativedragover: function (ev) {
			console.log("nativedragover");
			ev.preventDefault();
			this.$.droptarget.applyStyle("background-color", "blue");
		},
	    nativedrop: function (ev) {
			console.log("nativedrop");
			var data = ev.dataTransfer.getData("text");
            console.log("me llega " + data);
			this.dragHelper(ev);
	   },
	   dragHelper: function(ev) {
		   var b = this.$.dragobject.getBounds()
		   var w = b.width/2;
		   var h = b.height/2;
		  ...