1

New in Angular,Link from where I am trying to create. No error in console and no result getting displayed. I have slightly different requirement but this need to be the backbone but not able to complete it. What I want drag and drop functionality between 2 tables and also it should not be sortable. If the Item is being dragged from any table it should be dropped in another table and sorting should not be allowed. And multiselect should also be possible as in the link below. Don't know what I am doing wrong

https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/multi

Html

var app = angular.module('demo',['dndLists']);
app.controller("MultiDemoController", function($scope) {
 $scope.list = [
  {
    "listName": "A",
    "items": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      },
      {
        "label": "Item A4"
      }
    ],
    "dragging": false
  },
  {
    "listName": "B",
    "items": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      },
      {
        "label": "Item B4"
      }
    ],
    "dragging": false
  }
];
    $scope.models = [
      {listName: "A", items: [], dragging: false},
      {listName: "B", items: [], dragging: false}
    ];
   
    /**
     * dnd-dragging determines what data gets serialized and send to the receiver
     * of the drop. While we usually just send a single object, we send the array
     * of all selected items here.
     */
    $scope.getSelectedItemsIncluding = function(list, item) {
      item.selected = true;
      return list.items.filter(function(item) { return item.selected; });
    };

    /**
     * We set the list into dragging state, meaning the items that are being
     * dragged are hidden. We also use the HTML5 API directly to set a custom
     * image, since otherwise only the one item that the user actually dragged
     * would be shown as drag image.
     */
    $scope.onDragstart = function(list, event) {
       list.dragging = true;
       if (event.dataTransfer.setDragImage) {
         var img = new Image();
         img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';
         event.dataTransfer.setDragImage(img, 0, 0);
       }
    };

    /**
     * In the dnd-drop callback, we now have to handle the data array that we
     * sent above. We handle the insertion into the list ourselves. By returning
     * true, the dnd-list directive won't do the insertion itself.
     */
    $scope.onDrop = function(list, items, index) {
      angular.forEach(items, function(item) { item.selected = false; });
      list.items = list.items.slice(0, index)
                  .concat(items)
                  .concat(list.items.slice(index));
      return true;
    }

    /**
     * Last but not least, we have to remove the previously dragged items in the
     * dnd-moved callback.
     */
    $scope.onMoved = function(list) {
      list.items = list.items.filter(function(item) { return !item.selected; });
    };

    // Generate the initial model
    angular.forEach($scope.models, function(list) {
      for (var i = 1; i <= 4; ++i) {
          list.items.push({label: "Item " + list.listName + i});
      }
    });

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});
/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop into it once it's empty
 */
.multiDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.multiDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.multiDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
}

/**
 * Show selected elements in green
 */
.multiDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag &amp; Drop Lists for angular.js</title>

    <!-- jQuery is not required -->
    <!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->

    <!-- angular is the only dependency! -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body ng-app="demo">
<div ng-controller = 'MultiDemoController'>
<!-- your widget template -->
 <ul dnd-list='' dnd-drop="onDrop(list, item, index)">
    <li ng-repeat="item in list.items"
        dnd-draggable="getSelectedItemsIncluding(list, item)"
        dnd-dragstart="onDragstart(list, event)"
        dnd-moved="onMoved(list)"
        dnd-dragend="list.dragging = false"
        dnd-selected="item.selected = !item.selected"
        ng-class="{'selected': item.selected}"
        ng-hide="item.selected">
        {{item.label}}
    </li>
</ul>
	</div>
	</body>
	</html>

1 Answer 1

0

I found why it is not working.

Because of poor documentation, they missed one important thing

Take a look http://joxi.ru/5mdYR6jikPO892 (screenshot)

So problem was that you missed ng-repeat in your html

 ...
 <div ng-repeat="listItem in list" class="col-md-6 ng-scope">
     <ul dnd-list="list">
       <li ng-repeat="item in listItem.items"
           ...

Example JSFiddle

1
  • Thanks for the help, But it's still not working as it is given in the link . The item gets hidden as soon as it is selected and also while dragging it doesn't get dropped to the same or to the other list. It would be of great help if you can give me a working fiddle exactly same as the link.
    – Ratish
    Apr 16, 2017 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.