CODEWITHSUNDEEP
javascripthtmlangularjsdrag-and-drop
Nodedeveloper101
Nodedeveloper101

Reputation: 441

drag and drop with angular.js

I found this example on github. However the ReadMe isn't clean and the examples don't work out of the box when you download the repo. I'm trying to get the simple example to work however I cannot even get that working. It seems like a popular repo so I'm sure someone has figured it out.

heres what I've tried..

  1. added the HTML and CSS into my project
  2. added the controller to my angular 'app.js'
  3. added link to the 'angular-drag-and-drop-lists.js' file

right now I see nothing.. but when you inspect element you can tell the HTML is there. If anyone has any example of using angular.js drag and drop that would be great.

Upvotes: 0

Views: 2310

Answers (1)

Ravvy
Ravvy

Reputation: 199

I fell in the same trap as you (from your JSFiddle) trying to figure it out. I first looked at this page at their source code below. http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

It turns out that this is not the full source, just a template. Notice in index.html they make use of simple.html. Here's all the code to make it work. I won't be able to throw this on JSFiddle due to the use of a template.

Please let me know if you have any questions.

index.html:

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
    <script src="angular-drag-and-drop-lists.js"></script>
    <script src="app.js"></script>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>
<body ng-app="app">
    <div ng-controller="SimpleDemoController">

        <div class="simpleDemo row">

            <div class="col-md-8">
                <div class="row">
                    <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">List {{listName}}</h3>
                            </div>
                            <div class="panel-body" ng-include="'simple.html'"></div>
                        </div>
                    </div>
                </div>

                <div view-source="simple"></div>

            </div>

            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Generated Model</h3>
                    </div>
                    <div class="panel-body">
                        <pre class="code">{{modelAsJson}}</pre>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

simple.html:

<!-- The dnd-list directive allows to drop elements into it.
     The dropped data will be added to the referenced list -->
<ul dnd-list="list">
    <!-- The dnd-draggable directive makes an element draggable and will
     transfer the object that was assigned to it. If an element was
     dragged away, you have to remove it from the original list
     yourself using the dnd-moved attribute -->
    <li ng-repeat="item in list"
        dnd-draggable="item"
        dnd-moved="list.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}">
        {{item.label}}
    </li>
</ul>

StyleSheet.css (you'll need a lot of this css to make it look nice):

/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
    position: relative;
}

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

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}

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

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.simpleDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

app.js:

angular.module("app", ['dndLists']).controller("SimpleDemoController", function ($scope) {

    $scope.models = {
        selected: null,
        lists: { "A": [], "B": [] }
    };

    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({ label: "Item A" + i });
        $scope.models.lists.B.push({ label: "Item B" + i });
    }

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

});

Upvotes: 2

Related Questions