Category: JavaScript

10 Sep 2018 10:52

Joined:	11/01/2014
Level:	Silver
Points:	105

Points:	2

Ng-click not working after dropping elements using html5 drag & drop

I have implemented html 5 drag & drop in my angularjs application. But ng-click not firing once items are swapped. Click event ng-click working before swapping elements.

Could someone suggest on resolving this issue.

#769750

10 Sep 2018 12:17

Joined:	28/09/2005
Level:	Gold
Points:	637

Points:	4

I think you need to compile the newly added elements via drag event. so that angular JS will detect them and fire ng click event

see below example and try to do same for the newly added elements via drag event

2
down vote
You need to compile an new dom element created manually for angularjs to work on it so

app.directive('btnClick', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.append($compile(scope.$eval(attrs.actionBtn))(scope));
}
}
}])

hope the above works.

Thanks!
B.Ramana Reddy

#769752

10 Sep 2018 16:52

Joined:	11/01/2014
Level:	Silver
Points:	105

Points:	1

My code is given below
<html>
<body>
<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>
</body>
</html>

<script type="text/javascript">
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>

and I am using typescript and there is no $scope in it.

Device.ts file

public deviceSelected(data:any)
{
//processing the data
}

Could you please let me know how can we implement $compile with above code

Ng-click not working after dropping elements using html5 drag & drop

About dotnetspider.com

Quick Links

General

Services