Question

我在github上找到了这个例子。但是，自述文件并不干净，下载回购时，示例不会立即生效。我试图让这个简单的例子起作用，但我甚至无法实现这一点。这似乎是一个受欢迎的回购，所以我确定有人已经弄清楚了。

继承人我尝试过的事情。

将HTML和CSS添加到我的项目中
将控制器添加到我的角度＆＃39; app.js＆＃39;
添加了指向＆＃39; angular-drag-and-drop-lists.js＆＃39;文件

现在我什么也没看到..但是当你检查元素时，你可以告诉HTML是否存在。如果有人有任何使用angular.js拖放的例子，这将是伟大的。

Answer 1

我和你（来自你的JSFiddle）陷入同样的陷阱试图解决它。我首先在下面的源代码中查看了这个页面。 http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

事实证明，这不是完整的来源，只是一个模板。请注意，在index.html中，他们使用simple.html。以下是使其运行的所有代码。由于使用了模板，我无法在JSFiddle上抛出此内容。

如果您有任何疑问，请与我们联系。

的index.html：

<div ng-repeat="result in greatResults">...</div>

simple.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>

StyleSheet.css（你需要很多这个css才能让它看起来不错）：

<!-- 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>

app.js：

/**
 * 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;
}

使用angular.js进行拖放

1 个答案: