title: Changing cursor for draggable not working in chrome using vue.js
body: <p>I am trying to change the cursor of the draggable item in chrome. Everything i tried it is not working. There are solution on Stackoverflow but they are all outdated and not working with the actual chrome version. </p>
  
  <p>On drag the item is copied to a container which is the dragimage for the draggable. </p>
  
  <p>What i want is to have a grabbing cursor while dragging. How would that be possible? Any Ideas?</p>
  
  <p>See my code snippet for an example. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
        text_drop: 'Droppable Area',
          text_drag: 'Drag Area',
          drag_elements: [
          {text: 'one', selected: true},
          {text: 'two', selected: false},
          {text: 'three', selected: false},
          {text: 'four', selected: false},
          ]
      },
      computed: {
          selected_elements(){
              let selected = [];
              this.drag_elements.map((drag) =&gt; {
                  if(drag.selected){
                    selected.push(drag);
                  }
              })
              return selected;
          }
      },
      methods: {
        drag_it(event){
            let html = document.getElementById("dragElement");
              let drop_docs = this.selected_elements;
              if(drop_docs.length &gt; 1){
              let multiple = document.createElement('div');
                          multiple.classList.add('dragMultiple');
                          multiple.innerHTML = drop_docs.length + ' items';
                          html.innerHTML = '';
                          html.appendChild(multiple)
              }else{
                          html.innerHTML = event.target.outerHTML;
              }
        event.dataTransfer.setData('text/plain', '' );
              event.dataTransfer.setDragImage(html, 0, 0);
              event.dataTransfer.effectAllowed = "move";
          }, 
          drag_over(event){
              document.documentElement.style.cursor="-webkit-grabbing";
          },
          drag_end(event){
              document.documentElement.style.cursor="default";
          },
          select(event, drag_element){
            if(event.metaKey || event.shiftKey){
               drag_element.selected = !drag_element.selected;
            } else {
               this.drag_elements.map((drag) =&gt; {
                  if(drag === drag_element){
                      drag.selected = true;
                  }else{
                      drag.selected = false;
                  }
              })
            }
          }
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Dragme{
    width: 200px;
    height: 50px;
    margin-left: 20px;
    text-align: center;
    border:1px solid black;
    float:left;
  }
  
  #Dragme:hover {
     cursor: -webkit-grab;
  }
  
  #Dragme:active {
     cursor: -webkit-grabbing;
  }
  
     
  #Dropzone{
    float: left;
    width: 500px;
    height: 100px;
    border: 1px solid;
    margin-bottom: 50px;
  }
  
  .selected{
    border: 2px solid yellow !important; 
  }
  
  .dragMultiple{
    border: 1px solid black;
    padding: 10px;
    background-color: white;
  }
  
  #dragElement{
    position: absolute;
    top: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://vuejs.org/js/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;div id="Dropzone"&gt;{{text_drop}}&lt;/div&gt;
    &lt;div id="drag_elements"&gt;
    &lt;div v-for="drag in drag_elements"
         @dragstart="drag_it"
         @dragover="drag_over"
         @dragend="drag_end"
         @mouseup="select($event, drag)"
         draggable="true" 
         :class="{selected: drag.selected}"
         id="Dragme"&gt;{{drag.text}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="dragElement"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong>
  Actually it can be solved with the following answer 
  <a href="https://stackoverflow.com/questions/5697067/css-for-grabbing-cursors-drag-drop/38479487#38479487">CSS for grabbing cursors (drag &amp; drop)</a></p>
  
  <p>It is important to add the <strong>dndclass</strong> </p>
  
  <p>thx</p>
  
  <p>Blockquote</p>
  
  <p>@Carr for the hint</p>
  
  <p><strong>Update</strong>
  After Dragend or drop the cursor is not set to default. Only when moved it changes back. Any Ideas? </p>
  
  <p><strong>Update</strong>
  With they command key on mac or the shift key multiple items can be selected and dragged. A new dragitem is created for that purpose but the cursor does not allways fall back after dragend or drop.</p>
  
  <p><strong>Update</strong>
  Integrate method to from answer  -by Carr</p>