Я хочу наклонить элемент, который нужно перетащить, чтобы показать различие. У меня есть базовая функция перетаскивания здесь 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: Я не хочу использовать библиотеки.