0

我想要做的是单击一个按钮，我试图让用户选择显示的 2 个图像之一并使所选图像可拖动。我的代码显示 2 张图片，其中 1 张是可拖动的。我无法弄清楚如何添加该功能以让用户选择 2 个图像之一并让所选图像可拖动

这是我的html代码

    <div ng-app="test">
    <button name="Add" type="buton" ng-click="showMarker = true">Show List</button>
<hello>

</hello>
</div>

这是javascript代码

    angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative" ng-show="showMarker"><img id="mr" src="http://www.mbs.edu/i/gmap_marker_default.gif" /><img src="http://www.hypercosm.com/images/icons/add_marker_icon2.gif" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
                 $("#mr").draggable();
        }
    };
})

这是jsfiddle

4

2 回答 2

1

先提一些建议。除非绝对必要，否则不要创建自定义组件/指令。通常它倾向于创建自定义组件，因为人们仍然在思考 JQuery 或 DOM 操作。首先考虑数据，然后考虑数据+数据绑定将如何修改您的视图。我提出这个的原因是因为你的 hello 指令只是一个模板扩展器，不是吗？我将假设它只是用于演示目的，而不是您计划在生产中使用的东西。让我们来实现您想要实现的目标。

两个不同的标记，它们具有可拖动性，但可以打开或关闭此属性。

这是实现这一目标的指令。

.directive('drag', function() {
    return {
        restrict : 'A',
        link : function(scope, elm, attrs) {
            $(elm).draggable({ containment: "window",disabled:false});
            scope.$watch(attrs.drag,function(val){
                if(val === true){
                    $(elm).draggable('option','disabled',false);
                }
                else{
                    $(elm).draggable('option','disabled',true);
                }
            });
        }
    };
})

现在，一旦您编写了这样的指令，那么添加“拖动”能力就是小菜一碟。向任何元素添加一个 drag="dragVariable"，它将根据 dragVariable 是真还是假而变得可拖动。当然，这个实现是基于为我们提供拖动功能的 JQuery UI。

这是最后的小提琴，我们设置了两个复选框，可用于切换两个标记的拖动状态。当打开drag1时，您可以拖动标记1，当关闭时，拖动功能停止工作。

http://jsfiddle.net/7fMCF/8/

希望这可以帮助。

于 2013-03-05T13:37:59.190 回答
0

如果您将 id 更改为 classes 它应该可以工作，因为您的 id 仅引用第一个图像。

例如，如果您使用“图像”类，然后使用“可拖动”附加您想要选择的类，那么当您单击第二张图像时，您应该最终得到这个：

<div style="position: relative" ng-show="showMarker"><img class="image"  src="http://www.mbs.edu/i/gmap_marker_default.gif" /><img class="image draggable"  src="http://www.hypercosm.com/images/icons/add_marker_icon2.gif" /></div>

为此，您的选择器将是

$("image.draggable")
于 2014-02-04T00:06:42.213 回答