Hook jqxDragDrop events to Angular controller

[kjc1111Participant]

Hi, I’m trying to understand how to use jqxDragDrop within an Angular framework. Right now I am using jQuery to load a set of images into an image tiles container, and then I bind the jqxDragDrop events to the image elements so they can be dragged onto a canvas, like this:

	$.getJSON('/images/get', function(images) {
		images.forEach(function(image) {
			$('.image-tiles').prepend('<img class="tile-image" ...>');
		});

		// Set up drag and drop for the images.
		var tiles = $('.tile-image');
		if (tiles.length) {
			
			tiles.jqxDragDrop({
				dropTarget: $('#my-canvas'),
				dropAction: 'none'
			});
			tiles.on('dragEnd', function(e) {
				// do stuff
			});
			tiles.on('dropTargetEnter', function(e) {
				// do stuff
			});
			tiles.on('dropTargetLeave', function(e) {
				// do stuff
			});
			tiles.on('dragging', function(e) {
				// do stuff
			});
		}
	});

This works ok, but I’d like to change the code so the events are handled using by an Angular controller. Can I somehow rewrite and move all of this code to the controller, or do I need to keep the jQuery code as a scaffolding that calls my controller functions from the places where I am currently “doing stuff”? Is this what jqxAngular is designed to do?

Thanks for any help, and apologies if my question isn’t clear, I am still pretty new to both jQWidgets and Angular.

Regards,
Kevin

[DimitarParticipant]

Hello Kevin,

Please refer to the guide jQWidgets Integration with AngularJS, section Binding to Events, to learn how to bind to widget events in AngularJS.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kjc1111Participant]

Hi again,

I have found some time to try to convert the above code to angular using the examples in the event binding section of the angular integration guide. However, it seems like only my onDragStart and onDragEnd events are being triggered. Here is an orange square I set up as a test in my HTML code:

<div style="width:100px; height:100px; background-color:orange;" jqx-drag-drop jqx-settings="settings"></div>

Here are the settings in my angular controller:

	$scope.settings =
	{
		created: function() {
			console.log('created')
		},
		dropTarget: angular.element(document.querySelector('#my-canvas')),
		dropAction: 'none',
		onDrag: function(data, pos) {
			console.log('onDrag');
		},
		onDropTargetEnter: function() {
			console.log('onDropTargdetEnter');
		},
		onDropTargetLeave: function(data) {
			console.log('onDropTargetLeave');
		},
		onDragStart: function() {
			console.log('onDragStart');
		},
		onDragEnd: function() {
			console.log('onDragEnd');
		}
	};

When I run the code only created, onDragStart and onDragEnd get logged. Any ideas why the dragging and drop target events don’t get triggered?

Thanks,
Kevin

[DimitarParticipant]

Hi Kevin,

Thank you for the feedback. We will investigate why this issue occurs.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[DimitarParticipant]

Update: This issue has been fixed in jQWidgets version 3.7.0.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts