dragme.html

<element name='dragme'>

  <template>
    <link rel='stylesheet' href='dragme/dragme.css'>
    <div id='{{id}}' style='{{style}}' drop-container-class='{{drop-container-class}}' class='dragme-frame' frameclass='{{frameclass}}' titleclass='{{titleclass}}'>
      <div class='dragme-title'>{{heading}}
        <span style='float:right;cursor:pointer;'>&#10006;&nbsp;</span>
      </div>
      <div class='content'>
        <content></content>
      </div>
    </div>
  </template>

  <script>
  registerElement('dragme', {

    isShow: '',

    closeFunction: '',

    init: function() {
      var self = this;
      this.dragstart = false;
      this.isShow = true;
      var $title = $(this.$ele.children()[0]);
      $title.on('mouseover', function() {
        self.$ele.attr('draggable', self.dragstart = true);
      });
      $title.on('mouseout', function() {
        self.$ele.attr('draggable', self.dragstart = false);
      });
      $title.find('span').on('click', function() {
        self.$ele.css({
          'display': 'none'
        });
        closeFunction && closeFunction();
      });
      this.$ele[0].addEventListener('dragstart', this.dragStart, false);
      this.$ele[0].addEventListener('dragend', this.dragEnd, false);
      // frame
      if (typeof this.$ele.attr('frameclass') !== 'undefined') {
        this.$ele.removeClass('dragme-frame');
        this.$ele.addClass(this.$ele.attr('frameclass'));
      }
      // title
      if (typeof this.$ele.attr('titleclass') !== 'undefined') {
        $title.removeClass('dragme-title');
        $title.addClass(this.$ele.attr('titleclass'));
      }
    },

    dragStart: function(event) {
      // add Drop Container Listener
      if (typeof this.$ele.attr('drop-container-class') !== 'undefined') {
        var dropContainerClass = this.$ele.attr('drop-container-class');
        document.getElementsByClassName(dropContainerClass)[0].addEventListener('dragover', this.dragOver, false);
        document.getElementsByClassName(dropContainerClass)[0].addEventListener('drop', this.drop, false);
      } else {
        document.body.addEventListener('dragover', this.dragOver, false);
        document.body.addEventListener('drop', this.drop, false);
      }

      if (this.dragstart) {
        this.$ele.find('.content').css({
          'visibility': 'hidden'
        });
      }
      var style = window.getComputedStyle(event.target, null);
      event.dataTransfer.setData("Text", this.$ele.attr('id') + ',' +
        (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY));
    },

    dragOver: function(event) {
      var dragInfo = event.dataTransfer.getData("Text").split(',');
      if (dragInfo.length !== 3 && dragInfo[0] !== "") {
        event.stopPropagation();
      } else {
        event.preventDefault();
      }
      return false;
    },

    drop: function(event) {
      var dragInfo = event.dataTransfer.getData("Text").split(',');
      if (dragInfo.length !== 3) {
        event.stopPropagation();
        return;
      }
      var self = $('#' + dragInfo[0]).gk();
      event.preventDefault();
      var dm = self.$ele[0];
      dm.style.left = (event.clientX + parseInt(dragInfo[1], 10)) + 'px';
      dm.style.top = (event.clientY + parseInt(dragInfo[2], 10)) + 'px';
      return false;
    },

    dragEnd: function(event) {
      // remove Drop Container Listener
      if (typeof this.$ele.attr('drop-container-class') !== 'undefined') {
        var dropContainerClass = this.$ele.attr('drop-container-class');
        document.getElementsByClassName(dropContainerClass)[0].removeEventListener('dragover', this.dragOver, false);
        document.getElementsByClassName(dropContainerClass)[0].removeEventListener('drop', this.drop, false);
      } else {
        document.body.removeEventListener('dragover', this.dragOver, false);
        document.body.removeEventListener('drop', this.drop, false);
      }
      event.preventDefault();
      this.$ele.find('.content').css({
        'visibility': ''
      });
      return false;
    },

    onClose: function(callback) {
      this.isShow = false;
      closeFunction = callback;
    },

    close: function() {
      this.$ele.css({
        'display': 'none'
      });
      closeFunction && closeFunction();
      this.isShow = false;
    },

    hide: function() {
      this.$ele.css({
        'display': 'none'
      });
      this.isShow = false;
    },

    show: function() {
      if (!this.isShow) {
        this.$ele.css({
          'display': ''
        });
        this.isShow = true;
      }
    }

  });
  </script>

</element>