javascript 如何设置拖动元素的样式

How to style dragged element

提问by Alex

There are some events that I can use for handling drag & drop:

我可以使用一些事件来处理拖放：

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

https://developer.mozilla.org/en/DragDrop/Drag_and_Drop

there is a dragevent, which is fired during the time the element is being dragged. I can control the source element styling or the target droppable container, but how can I style the "ghost" element that's being created by the browser?

有一个drag事件，它在元素被拖动期间被触发。我可以控制源元素样式或目标可放置容器，但是如何为浏览器创建的“幽灵”元素设置样式？

I want to remove the "disabled" icon from it when the element is over a non-draggable area and replace it with a "cursor-move" icon

当元素位于不可拖动区域上时，我想从中删除“禁用”图标并将其替换为“光标移动”图标

Here's what I have so far:

这是我到目前为止所拥有的：

http://jsfiddle.net/YkaCM/

http://jsfiddle.net/YkaCM/

采纳答案by JonWarnerNet

Not too sure about other browsers however the dataTransferobject contains a property called mozCursor. This allows you to change the cursor in the drag state, however this is a Mozilla property.

对其他浏览器不太确定，但是该dataTransfer对象包含一个名为mozCursor. 这允许您在拖动状态下更改光标，但这是 Mozilla 属性。

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/mozCursor

An example of using this can be found at the following location, the setting is changed on dragstart(set to use default 'arrow' cursor), dragover(set to use auto drag cursor (arrow with copy)) and dragleave(reset to use default 'arrow' cursor):

可以在以下位置找到使用它的示例，设置更改为dragstart（设置为使用默认的“箭头”光标），dragover（设置为使用自动拖动光标（带复制的箭头））和dragleave（重置为使用默认的“箭头” ' 光标）：

http://jsfiddle.net/YkaCM/4/

http://jsfiddle.net/YkaCM/4/

---

---

Try the answers to:
Javascript: How can I set the cursor during a drag & drop operation on a website?

尝试以下答案：
Javascript：如何在网站上的拖放操作期间设置光标？

---

---

Updated your dragover with the following:

使用以下内容更新了拖动器：

$('#droppable').bind('dragover', function (e) {
  $(this).addClass('over'); // new

  ...

http://jsfiddle.net/YkaCM/1/

http://jsfiddle.net/YkaCM/1/

回答by Stecman

You can't style this directly as it is a bitmap/copy of what the element looked like when the drag started:

您不能直接设置样式，因为它是拖动开始时元素外观的位图/副本：

http://jsfiddle.net/2EvGP/

http://jsfiddle.net/2EvGP/

EDIT:

编辑：

You can actually cheat to achieve this by briefly changing the style of the element when the drag starts: http://jsfiddle.net/LULbV/

您实际上可以通过在拖动开始时简单地更改元素的样式来欺骗以实现此目的：http: //jsfiddle.net/LULbV/

$('#draggable').bind('dragstart', function (e){

  [Set style here]

  setTimeout(function(){
    [Reset style here]
  }, 1);

  ...

});

This works flawlessly in Chrome 19, and shows the style change depending on how you drag in Firefox 13. You would need to reset the dragged element's style on drop.

这在 Chrome 19 中完美运行，并根据您在 Firefox 13 中的拖动方式显示样式更改。您需要在放置时重置拖动元素的样式。

(Note I have a pretty fast computer, so I'm not sure if this hack would still work on slow machines)

（注意我有一台非常快的计算机，所以我不确定这个 hack 是否仍然适用于慢速机器）

回答by Naigel

basically you want to apply a specific style to newly created element that are son of #droppable?

基本上你想对新创建的元素应用特定的样式，这些元素是#droppable 的儿子？

#droppable div { here your code }

回答by Alvaro

An alternative, using only CSS, is to style the :activepseudo-class of the element to the desired drag style. The dragged copy will be created based on this state.

仅使用 CSS 的另一种方法是:active将元素的伪类设置为所需的拖动样式。将根据此状态创建拖动的副本。

However, the original element will be kept with this style, as the browser seems to keep it :activeuntil drop. To avoid this we can assign the style in an animation that runs for a very short period of time. Enough for the browser to copy the style but not too short. 0.1s seems enough for Chrome, Safari and Firefox.

但是，原始元素将保留这种样式，因为浏览器似乎会保留它:active直到删除。为避免这种情况，我们可以在运行时间很短的动画中指定样式。足以让浏览器复制样式但不要太短。0.1s 对于 Chrome、Safari 和 Firefox 来说似乎足够了。

https://jsfiddle.net/mLsw5ajr/

https://jsfiddle.net/mLsw5ajr/

$('#draggable').bind('dragstart', function(e) {

  // http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html
  var stuff = $(this).clone().wrap('<div></div>').parent().html();

  e.originalEvent.dataTransfer.effectAllowed = 'copy';
  e.originalEvent.dataTransfer.setData('stuff', stuff);
});

$('#draggable').bind('drag', function(e) {
  // here I want to style the ghost element, not the source...    
});

$('#droppable').bind('dragover', function(e) {

  if (e.originalEvent.preventDefault)
    e.preventDefault();

  e.originalEvent.dataTransfer.dropEffect = 'copy';
  return false;
});


$('#droppable').bind('dragenter', function(e) {
  $(this).addClass('over');
});

$('#droppable').bind('dragleave', function(e) {
  $(this).removeClass('over');
});


$('#droppable').bind('drop', function(e) {

  if (e.originalEvent.stopPropagation)
    e.originalEvent.stopPropagation();

  var stuff = $(e.originalEvent.dataTransfer.getData('stuff'));
  stuff.appendTo(this);
  return false;
});

#draggable,
#droppable {
  background: #ccc;
  color: #fff;
  padding: 10px;
  margin: 10px 0 100px;
}

#draggable:active {
  animation: drag_style .1s;
}

#droppable.over {
  background: #000;
}

@keyframes drag_style {
  0% {
    background-color: #fc0;
    color: #000;
  }
  99% {
    background-color: #fc0;
    color: #000;
  }
  100% {
    background-color: #ccc;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" draggable="true">
  <p>Drag me to my target</p>
</div>

<div id="droppable">
  <p>Drop me</p>
</div>

A problem I found in Firefox is that the element is kept :activeif there is no event triggering by another element (like a drop). To fix this we could trigger a click outside the element.

我在 Firefox 中发现的一个问题是，:active如果没有由另一个元素（如放置）触发的事件，则该元素会被保留。为了解决这个问题，我们可以触发元素外的点击。