Невозможно удалить элемент после перетаскивания

Я новичок в JS и стараюсь сделать простой интерфейс с чистым JS, где Пользователь может динамически добавлять элементы и перемещать их. Я нашел решения для создания элементов и элементов drag'n'drop, которые отлично работают отдельно. Но когда я попытался их объединить, функция отката прекратила работать ...Невозможно удалить элемент после перетаскивания

Что я делаю неправильно?

Шаблон:

<head> 
     <title>Int Demo</title> 
     <script src='js/script.js'></script> 
     <style type="text/css"> 
      .wrapper {width: 300px; height: 200px; background: #A3A1A1;} 
      .textblock {cursor: pointer; background: red;} 
     </style> 
    </head> 

    <body> 
     <div class="button" id="button">Add Textbox</div> 
     <div class="wrapper" id="wrapper"></div> 
    </body> 

</html>

Мой JS файл:

document.addEventListener("DOMContentLoaded", function() { init(); }, false); 

function init() { 
    button = document.getElementById('button'); 
    wrapper = document.getElementById('wrapper'); 

    button.addEventListener('click', btnClick, false); 
    wrapper.ondblclick = catchIt; 
} 

//add element 

function btnClick() { 
    wrapper.innerHTML += '<p class="draggable textblock">Text Here!</p>'; 
    sessionStorage.inputBoxes = wrapper; 
    console.log(sessionStorage); 
} 

// Activate Drag'n'Drop 

document.onmousedown = function(e) { 

    var dragElement = e.target; 

    if (!dragElement.classList.contains('draggable')) return; 

    var coords, shiftX, shiftY; 

    startDrag(e.clientX, e.clientY); 

    document.onmousemove = function(e) { 
    moveAt(e.clientX, e.clientY); 
    }; 

    dragElement.onmouseup = function() { 
    finishDrag(); 
    }; 

    function startDrag(clientX, clientY) { 

    shiftX = clientX - dragElement.getBoundingClientRect().left; 
    shiftY = clientY - dragElement.getBoundingClientRect().top; 

    dragElement.style.position = 'fixed'; 

    document.body.appendChild(dragElement); 

    moveAt(clientX, clientY); 
    }; 

    function finishDrag() { 
    dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px'; 
    dragElement.style.position = 'absolute'; 

    document.onmousemove = null; 
    dragElement.onmouseup = null; 
    } 

    function moveAt(clientX, clientY) { 
    var newX = clientX - shiftX; 
    var newY = clientY - shiftY; 

    // bottom offset 
    var newBottom = newY + dragElement.offsetHeight; 

    if (newBottom > document.documentElement.clientHeight) { 

     var docBottom = document.documentElement.getBoundingClientRect().bottom; 

     var scrollY = Math.min(docBottom - newBottom, 10); 


     if (scrollY < 0) scrollY = 0; 

     window.scrollBy(0, scrollY); 

     newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight); 
    } 


    // top offset 
    if (newY < 0) { 
     var scrollY = Math.min(-newY, 10); 
     if (scrollY < 0) scrollY = 0; 

     window.scrollBy(0, -scrollY); 
     newY = Math.max(newY, 0); 
    } 

    if (newX < 0) newX = 0; 
    if (newX > document.documentElement.clientWidth - dragElement.offsetHeight) { 
     newX = document.documentElement.clientWidth - dragElement.offsetHeight; 
    } 

    dragElement.style.left = newX + 'px'; 
    dragElement.style.top = newY + 'px'; 
    } 

    return false; 
}

источник

2015-07-24 s.spirit

Просто интересно, вы изучили спецификации html5 drag n drop? Они являются родными с html5, и это может быть проще, если они будут соответствовать тому, что вы пытаетесь сделать. – Shilly

@Shilly Я попытался использовать собственные функции drag'n'drop, но у меня было много проблем с ним в моих интерфейсах. Возможно, я просыпаюсь, но я решил вернуться в JS. –

Я изменил

dragElement.onmouseup = function() { 
    finishDrag(); 
};

document.onmouseup = function() { 
    finishDrag(); 
};

и он начал работать для меня. Это означает, что конечный пользователь должен будет удерживать нажатой кнопку мыши, чтобы продолжить перетаскивание, и что элемент будет помещен сразу же на кнопку мыши. Но я предполагаю, что это желаемая функциональность, или вы хотите, чтобы падение произошло только при втором щелчке мыши?

источник

2015-07-24 11:48:11 Shilly

Нет, вы сделали это так, как я ожидаю, что это сработает)) Спасибо)) Все работает отлично. –

Невозможно удалить элемент после перетаскивания

ответ

Смежные вопросы