Kick JS Drag Drop Demo

Kitchen sink example of data binding with kick js

by Ritesh Pahwa

HTML

<script src="https://cdn.jsdelivr.net/gh/radkick/kickjs/dist/kick.min.js"></script>
<div>
  <div kick-app>

    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>

    <div id="div1" ^drop="drop" ^dragover="allowDrop">
      <img src="http://www.radkick.com/img/radkick_logo_sm.png" draggable="true" ^dragstart="drag" id="drag1" width="88" height="31">
    </div>

    <div id="div2" ^drop="drop" ^dragover="allowDrop"></div>

  </div>

CSS

#div1,
#div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  background-color: #eee;
}

JavaScript

var vm = {
    allowDrop(vm, $e) {
      $e.preventDefault();
    },
    drag(vm, $e) {
      $e.dataTransfer.setData("text", $e.target.id);
    },
    drop(vm, $e) {
      $e.preventDefault();
      var data = $e.dataTransfer.getData("text");
      $e.target.appendChild(document.getElementById(data));
      //var el = document.querySelector();
      //$e.target.appendChild(el);
    }
  }


  // you may say '[kick-app] or '#kickApp' or 'body' or ...
  kick.bind('', vm);