Drag and Drop of list element where the only way to drag element is by an inner element

Question

I have an row of elements that sortable. I use ui-sortable because it plays nicely with angularjs. I want the sort icon (up and down arrow) to be the only element that can initiate the dragging of its parent element. Here is basically what I am working with

<ul ui-sortable="phoneSortableOptions" ng-model="lead.phoneList"> 
    <li ng-repeat="phone in lead.phoneList | orderBy: 'displayOrder'"> 
        <span class="contact-title" > Phone </span>
        <div class="contact-move-up-down button-move-up-down" ></div>
        <span> {{phone}} </span>
    </li>
</ul>

The only piece I would like to be draggable is

<div class="contact-move-up-down button-move-up-down" ></div>

I Read through the documentation but didn't find a way to make only one element draggable. Any insight into this problem would be greatly appreciated.

Also, if I am not mistaken, ui-sortable uses jQuery's sortable.

Answer 1

There are many ways to prevent the dragging of an object, but the one that worked for me is

app.directive('preventDrag', function () {
    return {
        link: function (scope, element, attributes) {
            element.on('mousedown', (e) {
                e.stopPropagation();
            });
        }
    }
});

I was hoping for more of a library fix, but this isn't too bad.

You could also try

• user-select: none; //css
• onmousedown="return false;"
• ondragstart="return false;"