title: How to tilt/rotate the item being dragged in javascript drag and drop?
body: <p>I want to tilt an item being dragged to show distinction. I have basic drag and drop fiddle here <a href="https://jsfiddle.net/igaurav/bqprc9p8/3/" rel="nofollow noreferrer">https://jsfiddle.net/igaurav/bqprc9p8/3/</a></p>
  
  <p>My javascript looks like:</p>
  
  <pre><code>"use strict";
  
  var source = null;
  
  function listItemDragStartHandler(event){
      // What is true there for?
      source = event.currentTarget;
      event.dataTransfer.setData("text/plain", event.currentTarget.innerHTML);
      event.currentTarget.style.transform = 'rotate(15deg)';
      event.dataTransfer.effectAllowed = "move";
  }
  
  function dragoverHandler(event) {
      event.preventDefault();
      event.dataTransfer.dropEffect = "move";
  }
  
  function dropHandler(event) {
      event.preventDefault();
      event.stopPropagation();
      var currentElement = event.currentTarget;
      var listContainer = currentElement.parentNode;
      listContainer.insertBefore(source, currentElement);
      source.style.transform = 'rotate(0deg)';
  }
  
  function delete_item(event) {
      var currentTarget = event.currentTarget;
      var grandParentOfDelete = currentTarget.parentNode.parentNode;
      grandParentOfDelete.remove();
  }
  
  function add_item() {
      var item_text_node = document.getElementsByName("add-item-text")[0]
      var item_text = item_text_node.value;
      if (item_text.length &gt; 0) {
          var item_template = document.getElementById("item-template");
          var item_clone = item_template.cloneNode(true);
          item_clone.removeAttribute("id");
          var clone_text = item_clone.getElementsByClassName("item-text")[0];
          clone_text.textContent = item_text;
          // reset the value
          item_text_node.value = "";
          var item_list = document.getElementById("item-list");
          item_list.appendChild(item_clone);
      } else {
          alert("No text?? Add some text!");
      }
  }
  
  function add_item_listener() {
      var add_item_button = document.getElementById("add-item");
      add_item_button.addEventListener("click", add_item);
  }
  
  function sample_data() {
      for(var i=0;i&lt;10;i++){
          var item_text_node = document.getElementsByName('add-item-text')[0]
          item_text_node.value = i;
          add_item();
      }
  }
  
  function init_app() {
      add_item_listener();
      sample_data();
  }
  
  window.onload = function () {
      init_app()
  }
  </code></pre>
  
  <p>Relevant HTML  is:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="add-item-div"&gt;
              &lt;input type="text" name="add-item-text"&gt;
              &lt;button id="add-item"&gt;Add Item&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="item-list"&gt;
          &lt;/div&gt;
          &lt;div id="item-template" class="item-list-element" draggable="true" ondragstart="listItemDragStartHandler(event);" ondrop="dropHandler(event);" ondragover="dragoverHandler(event);"&gt;
              &lt;div class="item-text"&gt;&lt;/div&gt;
              &lt;div class="delete-item-div"&gt;
                  &lt;button class="delete-item" onclick="delete_item(event);"&gt;Delete Item&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I am applying the transform on line <code>9</code> but the drag operation stops and drag doesn't start.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>P.S: I don't want to use libraries.</p>