Cannot create a button in a draggable list.

[jermny]

I love ng-nestable but it comes up short in this one situation for me.

I have an ng-nestable div and inside of the template is a simple button that has an ng-click event hooked up to it. When I click on the button it doesn't register the click but rather starts the drag and drop process. This is a deal breaker for me because I need each sortable 'item' to have a relevant button associated with it (in this case, Delete).

Any advice?

[kamilkp]

Try hooking up a ng-mousedown on the element where you have ng-click and invoke the stopPropagation method on the mousedown event there. Let me know if that solves the problem (yes I know it's ugly but if that works i might have an idea how to handle that situation inside the ng-nestable directive)

[runrog]

I found a fix for this. Here is what I did: 1.) Create a custom directive

 myApp.directive('nestableButton', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            $(element).on("mousedown", function(e) {
                e.preventDefault();
                return false;
            });
            $(element).on("click", function(e) {
                e.preventDefault();
                window.location = $(this).attr("href"); //if you want your URL to update
                return false;
            });
        }
    };
});

2.) In HTML

<a href="#" nestable-button><i class="fa fa-trash-o right"></i></a>
<a href="#" nestable-button><i class="fa fa-pencil right"></i></a>