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ディレクティブのためですよね？これはデモ目的であり、本番環境で使用する予定のものではないと想定します。あなたが達成したいことをやってみましょう。

ドラッグ可能性のプロパティを持つ2つの異なるマーカーですが、このプロパティはオンまたはオフにできます。

これを実現するディレクティブは次のとおりです。

.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がtrueかfalseかに基づいてドラッグ可能になります。もちろん、この実装は、ドラッグ機能を提供するJQueryUIに基づいています。

これが、2つのマーカーのドラッグ状態を切り替えるために使用できる2つのチェックボックスを設定した最後のフィドルです。drag1をオンにすると、マーカー1をドラッグでき、オフにすると、ドラッグ機能が機能しなくなります。

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

お役に立てれば。

于 2013-03-05T13:37:59.190 に答える
0

IDをクラスに変更すると、IDは最初の画像のみを参照しているため、機能するはずです。

たとえば、クラス「image」を使用してから、選択したいクラスに「draggable」を追加すると、2番目の画像をクリックすると次のようになります。

<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 に答える