javascript - Using HTML5 Drag & Drop, is there a way to hide the element from view while keeping the drag flow - Stack O

admin管理员组

文章数量:1316016

I am working on improving a drag and drop implementation by creating an indicator (a silhouette of the draged element) that moves along a set flex grid as you drag and move through the grid. In the current implementation the dragged element in place and when I drop on the drop target it updates the flex order. What I am looking to do is hide the element pletely to give a better visual cue as to where the element will be placed. The problem is if I hide the element on drag start, the drag workflow ends abruptly, not even triggering the subsequent drag operations.

I am working on improving a drag and drop implementation by creating an indicator (a silhouette of the draged element) that moves along a set flex grid as you drag and move through the grid. In the current implementation the dragged element in place and when I drop on the drop target it updates the flex order. What I am looking to do is hide the element pletely to give a better visual cue as to where the element will be placed. The problem is if I hide the element on drag start, the drag workflow ends abruptly, not even triggering the subsequent drag operations.

• javascript
• jquery
• html
• drag-and-drop

Share Improve this question Follow asked Jan 28, 2016 at 17:11 indigo0086indigo0086 43166 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

If I understand your question correctly you want to hide the element being dragged during the drag operation. This can be acplished by hiding the element when the dragover event is fired. Here is an example:

JSFiddle (Drag the orange box)

Javascript:

;
(function($, undefined) {
  var dragging;

  $(function() {
    $('div.flex-grid').on({
      'dragstart': dragstart,
      'dragend': dragend
    }, 'div.drag').on({
      'dragover dragenter': dragover,
      'dragleave': dragleave,
      'drop': drop
    }, 'div.drop');
  });

  function dragstart(e) {
    e.stopPropagation();
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
      dt.effectAllowed = 'move';
      dt.setData('text/html', '');
      dragging = $(this);
    }
  }

  function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.originalEvent.dataTransfer;
    if (dt && dragging) {
      dt.dropEffect = 'move';          
      $(this).css({
        'background-color': 'yellow'
      });
      dragging.hide();
    }
    return false;
  }

  function dragleave(e) {
    e.stopPropagation();
    $(this).css({
      'background-color': '#fff'
    });
  }

  function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    if (dragging) {
      var dropzone = $(this);
      dragging.data('dropzone', dropzone);
      dragging.trigger('dragend');
    }
    return false;
  }

  function dragend(e) {
    if (dragging) {
      var dropzone = dragging.data('dropzone');
      if (dropzone) {
        dropzone.append(dragging);
      }
      dragging.show();
    }
    $('div.drop').css({
      'background-color': '#fff'
    });
    dragging = undefined;
  }
}(jQuery));

HTML:

<div class="flex-grid">
  <div class="flex-row">
    <div class="drop">
      <div class="drag" draggable="true"></div>
    </div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
  <div class="flex-row">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
  <div class="flex-row">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
</div>

CSS:

* {
  border-style: none;
  padding: 0;
  margin: 0;
}

.flex-grid {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.flex-row {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.drop,
.drag {
  display: block;
  width: 100px;
  height: 100px;
}

.drag {
  background-color: orange;
  cursor: move;
}

.drop {
  border: 1px solid #ccc;
  background-color: #fff;
}

本文标签：