jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable Hook jqxDragDrop events to Angular controller

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 5 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • kjc1111
    Participant

    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

    • This topic was modified 5 years, 9 months ago by  kjc1111.
    • This topic was modified 5 years, 9 months ago by  kjc1111.

    Dimitar
    Participant

    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/


    kjc1111
    Participant

    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

    • This reply was modified 5 years, 6 months ago by  kjc1111.

    Dimitar
    Participant

    Hi Kevin,

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

    Best Regards,
    Dimitar

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


    Dimitar
    Participant

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

    Best Regards,
    Dimitar

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.