Question

我想倾斜被拖动的项目以显示区别。我在这里有基本的拖放小提琴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：我不想使用库。

Answer 1

基本上，我们可以使用setDragImage来替换它为我们自己的拖动操作渲染的重影图像的浏览器实现。

我们在小提琴中使用克隆节点，然后将其添加到dom中。

然后，您可以对克隆元素中的内部容器进行转换。

＆＃13;

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);

＆＃13;

<div id="drag-with-create-add" class="dragdemo" draggable="true">
  <div class="inner">
    drag me
  </div>
</div>

＆＃13;

部分基于Stuart Langridge的helpfull article。

注意：这里的诀窍是对内部元素应用转换，而不对具有拖动事件的元素应用转换。只有在应用于内部元素时才会出现转换。

Answer 2

我刚创建了一个示例fiddle。哪个使用setDragImage方法，请查看并评论您的需求，以便我们能够提出答案。

我添加了鬼影并添加了“震动”。拖动开始时的感觉。您可以通过css类似地旋转拖动的鬼影像。

另请注意，我们在拖动图像时克隆图像以显示重影图像。所以我们需要手动从dom中删除它。

＆＃13;

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

＆＃13;

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's 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);
  }
}

＆＃13;

<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">

＆＃13;

如何在javascript拖放中倾斜/旋转被拖动的项目？

2 个答案: