个人中心
gpt4 book ai didi

javascript - 使用 angular.js 进行拖放

转载 作者：行者123 更新时间：2023-12-02 15:24:58 25 4
gpt4 key购买 nike

我在github上找到了这个例子。然而，自述文件并不干净，当您下载存储库时，示例也无法开箱即用。我试图让这个简单的例子发挥作用，但我什至无法让它发挥作用。它似乎是一个流行的存储库，所以我确信有人已经弄清楚了。

这是我尝试过的..

  1. 将 HTML 和 CSS 添加到我的项目中
  2. 将 Controller 添加到我的 Angular “app.js”
  3. 添加了“angular-drag-and-drop-lists.js”文件的链接

现在我什么也没看到..但是当你检查元素时你可以知道 HTML 在那里。如果有人有任何使用 angular.js 拖放的示例，那就太好了。

最佳答案

我和你(来自你的 JSFiddle)陷入了同样的陷阱，试图找出答案。我首先查看了这个页面下面的源代码。 http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

事实证明，这不是完整的源代码，只是一个模板。请注意，在index.html 中，他们使用了simple.html。这是使其工作的所有代码。由于使用了模板，我无法将其扔到 JSFiddle 上。

如果您有任何疑问，请告诉我。

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>

简单.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(您需要大量此 css 才能使其看起来漂亮):

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

});

关于javascript - 使用 angular.js 进行拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33768923/

25 4 0
文章推荐： algolia - Algolia 上的多个 "LIKE"字符串搜索
文章推荐： javascript - 按左/右箭头执行某些操作
文章推荐： javascript - 在 Javascript 中循环函数
文章推荐： javascript - Javascript 中嵌套函数 "Class"结构中的变量范围
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com