почему ng-click не работает с перетаскиванием html5 в приложении angularjs? - PullRequest
0 голосов
/ 05 сентября 2018

Я реализовал перетаскивание html5 в приложении angularjs. Как только элементы поменялись местами, ng-click не работает.

 <div id="div" style="float:left" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">    
<div id="divPanels" ondragstart="handleDragStart(event)" ondragenter="handleDragEnter(event)"
                             ondragleave="handleDragLeave(event)" dragend="handleDragEnd(event)"
                             draggable="true" class="dragdropClass"
                             style="float:left;border:1px solid;margin:10px;padding:10px">

<div ng-click="RC.deviceSelected(RC.finalSelectedList)"
                                 style="height:294px;width:154px;padding:2px;float:left;cursor: pointer;"> 
                                 <p>Click here...</p>
                                   <img src="../Media/Icon.png" style="width:25px" />

                                   </div>
</div>
</div>




<script>
    var dragSrcEl = null;
    function handleDragStart(e) {
        if (e.target.className.indexOf('dragdropClass') > -1  ) {
            dragSrcEl = e.target;
           // dragSrcEl.style.opacity = '0.4';
            var dt = e.dataTransfer;
            dt.effectAllowed = 'move';
            dt.setData('text', dragSrcEl.innerHTML);

            // customize drag image for one of the panels
            if (dt.setDragImage instanceof Function && e.target.innerHTML.indexOf('X') > -1) {
                var img = new Image();
                img.src = 'dragimage.jpg';
                dt.setDragImage(img, img.width / 2, img.height / 2);
            }
        }
return false;

    }
    function handleDragOver(e) {
        if (dragSrcEl) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
        }
return false;

    }
    function handleDragEnter(e) {
        if (dragSrcEl) {
            e.target.classList.add('over');
        }
return false;

    }
    function handleDragLeave(e) {
        if (dragSrcEl) {
            e.target.classList.remove('over');
        }
return false;

    }
    function handleDragEnd(e) {
        dragSrcEl = null;
        [].forEach.call(cols, function (col) {
            col.style.opacity = '';
            col.classList.remove('over');
        });
return false;

    }

    function handleDrop(e) {
        if (dragSrcEl) {
            e.stopPropagation();
            e.stopImmediatePropagation();
            e.preventDefault();
            if (dragSrcEl != this) {
            if(e.target.innerHTML.indexOf('ondrag')!=-1){
            return false;
            }
            else{
                dragSrcEl.innerHTML = e.target.innerHTML;
                e.target.innerHTML= e.dataTransfer.getData('text');
                }
            }
        }
return false;

}
</script>

В приведенном выше коде ng-click = "RC.deviceSelected (RC.finalSelectedList)" работает до замены элементов, но после замены элементов ng-click не работает. deviceSelected () не вызывается после замены элементов с помощью перетаскивания. Но перед переключением элементов срабатывает deviceSelected ().

Самый ранний ответ очень ценится.

1 Ответ

0 голосов
/ 05 сентября 2018

Я бы предложил вместо этого использовать ng-drag-drop.

https://www.npmjs.com/package/ng-drag-drop

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...