2

ng-repeat 内に、要素をクリックしてドラッグできる要素のリストがあります。クリックすると表示され、ドラッグすると...要素をドラッグします。

ドラッグすると、ドラッグする要素の数が円で表示されます。

私の問題は、クリックするとドラッグサークルが表示されることです。一方、ドラッグするのではなく、クリックするだけです。

クリックとドラッグ アクションを区別するために、(マウスで) 長押しアクションのように、クリック時に 2 秒のように設定する方法はありますか?

この投稿に似ていますが、クリック時のドラッグを防止したいと思います(Angularの方法で)。

ここにいくつかのマークアップがあります:

<div class="docs-manager-doc box-container" ng-class="{'showActions':doc.showActions}">
    <a class="box-square" ng-href ng-click="docsManager.toggleDocumentSelection(doc)">
        <span class="flaticon-dark" 
            ng-class="{ 'flaticon-video-embed':(!doc.selected && doc.ref && doc.targetType==='EMBEDDED_VIDEO'),
                        'flaticon-{{doc.label | docExtMap}}':!doc.selected && !doc.ref,
                        'flaticon-tick':doc.selected }" ibp-prevent-drag>
        </span>
    </a>

    <a ng-drag="true" ng-drag-data="doc" ng-drag-success="onDragComplete($data)" ng-drag-begin="onDragStart($data)" ng-drag-stop-move="onDragStop($data, $event)">
        <span class="box-drag">  
            <span class="dragging" ng-show="iamdragging" >
                 <span class="flaticon-dark flaticon-small">
                   <p class="flaticon-default-doc">{{docsManager.documents.selected.length}}</p>
                </span>
            </span>
        </span>
    </a>
</div>

ngDraggableディレクティブを使用しています。

それが役立つ場合は、ここにいくつかのコード：

.controller('DocumentsManagerCtrl', ['...',
    function(...) {

        $scope.iamdragging = false;

        $scope.onDragStop = function(data, event){
            $scope.iamdragging = false;
        };

        $scope.onDragStart = function(data){
            if(!data.selected){
                $scope.docsManager.toggleDocumentSelection(data);
            }
            $scope.iamdragging = true;
        };

        $scope.onDragComplete = function(){
              // do something
        };

ng-click-or-drag のようなディレクティブがあるとよいかもしれません。クリックが 2 秒を超えると、ドラッグとして解釈されます。

4

3 に答える 3

1

問題はここで部分的に解決されました。https://github.com/fatlinesofcode/ngDruggable/issues/12 . 質問を閲覧している他の誰かに役立つ場合に備えて投稿します。

ドラッグ アクションを開始したい要素に ng-prevent-drag="true" を設定すると、そのオブジェクトでのドラッグ アクションの開始が無効になります。

この質問をした benek も、上記のリンクの議論に関与していると思います。彼はこれが ipad で壊れることを示しましたが、私はこれが機能するラップトップでテストしました。

于 2014-10-09T06:58:56.650 に答える