繁体   English   中英

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

[英]How to tilt/rotate the item being dragged in javascript drag and drop?

我想倾斜一个被拖动的项目以显示区别。 我有基本的拖放小提琴这里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行应用变换但拖动操作停止并且拖动没有开始。

我究竟做错了什么?

PS:我不想使用库。

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

我们像小提琴一样使用克隆节点,然后将它添加到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> 

这部分是基于Stuart Langridge的一篇有用的文章

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

我刚刚创建了一个样本小提琴 其中使用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'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); } } 
 <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"> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM