![](/img/trans.png)
[英]How to style the item being dragged with HTML 5 Drag And Drop API
[英]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.