Utilizing the dnd library to incorporate drag and drop functionality

Question

Utilizing the dnd library to incorporate drag and drop functionality

I've encountered an issue with the code snippet below. Although I am able to drag elements, I am unable to drop them. How can I trigger the dropFunction when a drop occurs?

Drag code:
            <div>
            <a class="button" ng-class="{editing: mode == modes.edit_rows}" ng-repeat="col in definition.columns" ng-click="editColumn($index)"
                dnd-type="'columnPills'" 
                dnd-draggable="event"
                dnd-effect-allowed="copy"
                dnd-copied=""
                dnd-effect-allowed="move"
                dnd-moved="moveAndDeletePills(definition.rows,$index)">{{name.toString()}}</a></div>

Drop code:
            <div dnd-allowed-types="'columnPills'"
            dnd-drop="dropFunction(event, index, item, external, type, definition)"
            dnd-dragover="true"
            dnd-droppable="true">
            </div>

I have attempted calling the drop function dropFunction() without any arguments, but unfortunately, the function does not execute.

javascript angularjs drag-and-drop

Answer 1

Answer №1

Are you sending back the 'item' in the callback function?

  $scope.dropCallback = function(event, index, item, external, type, allowedType) {
    if (external) {
        ...
        return false;
    }
    return item;
  };

Refer to the Documentation below, specifically where it states "it must return the object that will be inserted"

"dnd-drop Optional expression that is called when an element is dropped over the list. If the expression is used, it should return the object to be added to the list. If it returns false, the drop will be stopped and the event is propagated."

https://github.com/marceljuenemann/angular-drag-and-drop-lists

Answer 2

Are you sending back the 'item' in the callback function?

  $scope.dropCallback = function(event, index, item, external, type, allowedType) {
    if (external) {
        ...
        return false;
    }
    return item;
  };

Refer to the Documentation below, specifically where it states "it must return the object that will be inserted"

"dnd-drop Optional expression that is called when an element is dropped over the list. If the expression is used, it should return the object to be added to the list. If it returns false, the drop will be stopped and the event is propagated."

https://github.com/marceljuenemann/angular-drag-and-drop-lists

Answer 3

Answer №2

Appreciations to @sjm for the valuable input! However, it is worth noting that in addition to implementing the callback, we must ensure the usage of dnd-list in the drop code because the dnd library specifically functions with a list.

Furthermore, it is crucial to pass the list as an argument and append the new dropped object to the list.

Following thorough research and testing, I am delighted to present the accurate code below.

Drag Code:
                 <div>
                 <li class="button" ng-class="{editing: mode == modes.edit_rows}" ng-repeat="col in definition.columns" ng-click="editColumn($index)"
                 dnd-type="'col'" 
                 dnd-draggable="col"
                 dnd-effect-allowed="move"
                 dnd-moved="moveAndDeletePills(definition.rows,$index)">{{name.toString()}}</li>               
                 </div>


Drop Code:
        <div dnd-allowed-types="'col'"
        dnd-list="definition.rows"
        dnd-drop="dropFunction(event, index, item, external, type, definition)"
        dnd-dragover="true"
        dnd-droppable="true">

        <li class="button" ng-repeat="row in definition.rows" ng-click="editRow($index)"</li>
        </div>

Answer 4

Appreciations to @sjm for the valuable input! However, it is worth noting that in addition to implementing the callback, we must ensure the usage of dnd-list in the drop code because the dnd library specifically functions with a list.

Furthermore, it is crucial to pass the list as an argument and append the new dropped object to the list.

Following thorough research and testing, I am delighted to present the accurate code below.

Drag Code:
                 <div>
                 <li class="button" ng-class="{editing: mode == modes.edit_rows}" ng-repeat="col in definition.columns" ng-click="editColumn($index)"
                 dnd-type="'col'" 
                 dnd-draggable="col"
                 dnd-effect-allowed="move"
                 dnd-moved="moveAndDeletePills(definition.rows,$index)">{{name.toString()}}</li>               
                 </div>


Drop Code:
        <div dnd-allowed-types="'col'"
        dnd-list="definition.rows"
        dnd-drop="dropFunction(event, index, item, external, type, definition)"
        dnd-dragover="true"
        dnd-droppable="true">

        <li class="button" ng-repeat="row in definition.rows" ng-click="editRow($index)"</li>
        </div>

Utilizing the dnd library to incorporate drag and drop functionality

Answer №1

Answer №2

Similar questions

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

What is the process for generating an array of arrays in a React component?

Manipulating global state properties within a reducer function in React: How to do it efficiently

Issue with AngularJS directive failing to trigger on click event

Navigating with Angular 1.5 Component router in conjunction with Express.js

Possible rephrased version: "Encountering a Jquery clash

What is the best way to submit updated data from an Angular form?

Accessing an array outside of an Ajax call that was initiated within a success callback

Using jQuery to create a dynamically moving div that forms an endless wall

Troubleshooting issues with data parsing in an Angular typeahead module

Establishing a default v-on event for a Vue component

Why won't the props pass down to the child component?

Issue with highcharts and vue.js: creating a unique chart for displaying measurements

Is it possible to dynamically update the currency symbol in an AngularJS filter?

Reconfigure an ancestral item into a designated key

What is the process for deploying a next.js application with a custom express backend to a VPS or Heroku platform?

JavaScript (Create a button that toggles the visibility of an element)

Issue with Jquery animation

The ng-grid in Angular fails to update when changes are made from a modal dialog