Edit Question - KnowledgeHub

Title Body

I'm using html5's drag and drop functionalities to rearrange dom elements on screen - I attach css behavior to the various states of dragging and dropping when I do this, but the problem I'm experiencing is that the hover state remains even after I've dragged, dropped, and moused out of a DOM element. Here's my code: JAVASCRIPT: function addDragListeners(){ $('.segmentListItem').each(function(index){ $(this)[0].addEventListener('dragstart',handleDragStart,false); //rollover for current $(this)[0].addEventListener('drop',handleDrop,false); //drops dragged element $(this)[0].addEventListener('dragover',handleDragOver,false); //allows us to drop $(this)[0].addEventListener('dragenter',handleDragEnter,false); //rollover for target $(this)[0].addEventListener('dragleave',handleDragLeave,false); //sets dragged item back to normal $(this)[0].addEventListener('dragend',handleDragEnd,false); //sets all back to normal }); } function handleDragEnter(e) { // this / e.target is the current hover target. this.classList.add('over'); } function handleDragLeave(e) { this.classList.remove('over'); // this / e.target is previous target element. } function handleDragEnd(e){ $('.segmentListItem').removeClass('over'); //removes the over class on all elements } function handleDragStart(e){ draggedItem = this; e.dataTransfer.effectAllowed = 'move'; } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false; } function handleDrop(e){ if (e.stopPropagation) { e.stopPropagation(); } if (draggedItem != this) { //MH - swap if we're not dragging the item onto itself var draggedIndex = $('.segmentListItem').index($(draggedItem)); var targetIndex = $('.segmentListIte

Tags (comma-separated) Cancel