Ember Drag to connect views

by amindunited

HTML

<svg id="snapCanvas"></svg>
<script type="text/x-handlebars" data-template-name="application">
    <header>Top</header>
{{view App.FirstView}}
{{view App.SecondView }}    
</script>
<script type="text/x-handlebars" data-template-name="first">
One
    {{jack-in}}
    {{jack-out}}
</script>

<script type="text/x-handlebars" data-template-name="second">
Two
    
    {{jack-in}}
    {{jack-out}}
</script>

<script type="text/x-handlebars" data-template-name="components/jack-in">
    In
</script>

<script type="text/x-handlebars" data-template-name="components/jack-out">
    Out
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.js"></script>

CSS

.emApp {
    position:relative;
}
.blockView {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: solid 1px green;
}


[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.jack {
    width: 50px;
    height: 50px;
    border-radius: 20px;
    border: solid 1px black;
    text-align: center;
    line-height: 50px;
}

#snapCanvas {
    height: 500px;
    width: 500px;
    background-color: #efefef;
    position: absolute;
}

JavaScript

var paper;
$(function(){
    var snap = Snap('#snapCanvas');
    console.log(snap);
    paper = snap;
    /*
    var l = snap.line(50, 50, 450, 450);
    l.attr({
        stroke:'#ee6611',
        strokeWidth: '4'
    });
    */
});

App = Em.Application.create();
App.ApplicationView = Em.View.extend({
    classNames: ['emApp']
});

App.FirstView = Em.View.extend({
    classNames: ['blockView'],
    templateName: 'first',
});
App.SecondView = Em.View.extend({
    classNames: ['blockView'],
    templateName: 'second'
}); 
App.JackInComponent = Em.Component.extend({
    classNames: ['jack'],
    attributeBindings: ['draggable'],
    draggable: true,
    dragStart: function(e){
        var dataTransfer = e.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
        var elmId = this.get('elementId');
        dataTransfer.setData('fromElementId', elmId);
        console.log("drag start at in");
    },
    drop: function(e){
        var viewId = e.originalEvent.dataTransfer.getData('Text'),
            view = Ember.View.views[viewId];
        var dataElm = e.originalEvent.dataTransfer.getData('fromElementId');
        
        connectObjects(e.target, $('#'+dataElm)[0]);
        console.log("drop at in");
    },
    dragEnter: function(e){
        e.preventDefault();
        e.stopPropagation();
    },
    dragOver: function(e){
        e.preventDefault();
        e.stopPropagation();
    }
    
});

App.JackOutComponent = Em.Component.extend({
    classNames: ['jack'],
    attributeBindings: ['draggable'],
    draggable: true,
    dragStart: function(e){
        var dataTransfer = e.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
        var elmId = this.get('elementId');
        dataTransfer.setData('fromElementId', elmId);
        console.log("drag start at out");
    },
    drop: function(e){
        var viewId = e.originalEvent.dataTransfer.getData('Text'),
            view =...