Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit 3fc120e7 authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Merge branch 'fix-firefox-dragging-dropping' into 'develop'

fix: dragging and dropping should work in firefox now

See merge request R3/howto-cards!218
parents e5e1f639 23c4cb50
......@@ -16,7 +16,7 @@ window.pinned_cards = [
let create_card = function(icon, title, caption, link) {
let new_div = document.createElement('div');
new_div.innerHTML = `
<a class="card-link card-dynamic" href="${link}">
<a class="card-link card-dynamic" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" href="${link}">
<div class="card" draggable="True" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
<div class="card-header">
<div class="card-icon">${icon}</div>
......@@ -33,8 +33,8 @@ let create_card = function(icon, title, caption, link) {
let create_pinned_card = function(icon, title, caption, link) {
let new_div = document.createElement('div');
new_div.innerHTML = `
<a class="card-link card-dynamic-pinned" href="${link}">
<div class="card-pinned" draggable="True" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
<a class="card-link card-dynamic-pinned" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)" href="${link}">
<div class="card-pinned" draggable="True" draggable="false" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
<div class="card-header">
<div class="card-icon">${icon}</div>
</div>
......@@ -77,17 +77,21 @@ let remove_from_list = function(the_list, the_object, key) {
}
// ============= DRAG&DROP functions ========================================
window.cardDragStart = function(event) {
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
// First, attach classes for animations
event.target.classList.add('card-dragged');
event.target.children[0].classList.add('card-dragged');
event.target.children[1].classList.add('card-dragged');
target.classList.add('card-dragged');
target.children[1].classList.add('card-dragged');
target.children[0].classList.add('card-dragged');
$right_inner_container.classList.add('droppable');
// Attach data about the card to drag&drop event
let card = {
"title": event.target.dataset['title'],
"icon": event.target.dataset['icon'],
"caption": event.target.dataset['caption'],
"link": event.target.dataset['link'],
"title": target.dataset['title'],
"icon": target.dataset['icon'],
"caption": target.dataset['caption'],
"link": target.dataset['link'],
"type": "big"
}
event.dataTransfer.setData("card", JSON.stringify(card));
......@@ -96,20 +100,28 @@ window.cardDragStart = function(event) {
return true;
}
window.cardDragEnd = function(event) {
event.target.classList.remove('card-dragged');
event.target.children[0].classList.remove('card-dragged');
event.target.children[1].classList.remove('card-dragged');
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
target.classList.remove('card-dragged');
target.children[1].classList.remove('card-dragged');
target.children[0].classList.remove('card-dragged');
$right_inner_container.classList.remove('droppable');
return true;
}
window.pinnedCardDragStart = function(event) {
var target = event.target;
if (target.nodeName == 'A') {
target = target.firstElementChild;
}
$left_inner_container.classList.add('droppable');
// Attach data about the card to drag&drop event
let card = {
"title": event.target.dataset['title'],
"icon": event.target.dataset['icon'],
"caption": event.target.dataset['caption'],
"link": event.target.dataset['link'],
"title": target.dataset['title'],
"icon": target.dataset['icon'],
"caption": target.dataset['caption'],
"link": target.dataset['link'],
"type": "small"
}
event.dataTransfer.setData("card", JSON.stringify(card));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment