Как наклонять/поворачивать элемент, перетаскиваемый в javascript, перетаскивание?

Я хочу наклонить элемент, который нужно перетащить, чтобы показать различие. У меня есть базовая функция перетаскивания здесь https://jsfiddle.net/igaurav/bqprc9p8/3/

Мой javascript выглядит так:

"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 > 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<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()
}

Соответствующий HTML:

<body>
    <div id="container">
        <div id="add-item-div">
            <input type="text" name="add-item-text">
            <button id="add-item">Add Item</button>
        </div>
        <div id="item-list">
        </div>
        <div id="item-template" class="item-list-element" draggable="true" ondragstart="listItemDragStartHandler(event);" ondrop="dropHandler(event);" ondragover="dragoverHandler(event);">
            <div class="item-text"></div>
            <div class="delete-item-div">
                <button class="delete-item" onclick="delete_item(event);">Delete Item</button>
            </div>
        </div>
    </div>
</body>

Я применяю преобразование в строке 9, но операция перетаскивания останавливается и перетаскивание не запускается.

Что я делаю неправильно?

P.S: Я не хочу использовать библиотеки.

Ответы

Ответ 1

В принципе, мы можем использовать setDragImage для замены реализации браузера призрачного изображения, которое оно выполняет для операции перетаскивания, с одним наших собственных.

Мы используем клонированный node, как и в скрипке, и добавляем его в dom.

Затем вы можете сделать преобразование во внутреннем контейнере в клонированном элементе.

document.getElementById("drag-with-create-add").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);

    crt.style.position = "absolute"; 
    crt.style.top = "0px"; 
    crt.style.left = "-100px";
    
    var inner = crt.getElementsByClassName("inner")[0];
    inner.style.backgroundColor = "orange";
    inner.style.transform = "rotate(20deg)";
    
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 20, 20);
}, false);
<div id="drag-with-create-add" class="dragdemo" draggable="true">
  <div class="inner">
    drag me
  </div>
</div>

Ответ 2

Я только что создал образец fiddle. Который использует метод setDragImage, пожалуйста, посмотрите и прокомментируйте свои потребности, чтобы мы могли ответить на этот вопрос.

Я добавил изображение призрака и добавил "трясти", когда начинаю перетаскивание. Аналогичным образом можно повернуть изображение призрачного перетаскивания через css.

Также обратите внимание, что мы клонируем изображение при перетаскивании, чтобы показать изображение-призрак. Поэтому нам нужно вручную удалить это из dom.

document.addEventListener("dragstart", function(e) {
  var img = document.createElement("img");
  img.src = "http://i.imgur.com/BDcvqmf.jpg";
  e.dataTransfer.setDragImage(img, 5000, 5000); //5000 will be out of the window
  drag(e)
}, false);

var crt, dragX, dragY;
//document.addEventListener('drag',drag)
function drag(ev) {
  crt = ev.target.cloneNode(true);
  crt.className = "face";
  crt.style.position = "absolute";
  crt.style.opacity = "0.9";
  document.body.appendChild(crt);
  ev.dataTransfer.setData("text", ev.target.id);
}

document.addEventListener("dragover", function(ev) {
  ev = ev || window.event;
  dragX = ev.pageX;
  dragY = ev.pageY;
  crt.style.left = dragX + "px";
  crt.style.top = dragY + "px";
}, false);

document.addEventListener("dragend", function(event) {
  crt.style.display = 'none';
  crt.remove()
});
body {
  padding: 10px
}

#draggable-element {
  width: 100px;
  height: 100px;
  background-color: #666;
  color: white;
  padding: 10px 12px;
  cursor: move;
  position: relative;
  /* important (all position that not `static`) */
}

.face {
  animation: shake 1s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(4px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

See the tilt in action on drag start. <br>

<img draggable id="draggable-element" src="http://i.imgur.com/BDcvqmf.jpg">