web-dev-qa-db-ja.com

スケーリングされたdiv上のドラッグ可能な要素の正確なドロップ

問題

要素をスケーラブルなdivコンテナーにドラッグするときに小さな問題が発生します。

要素が実際にコンテナに入ると、要素はうまくドラッグされ、想定どおりに機能します。

スケーラブルコンテナにドラッグされる大きな要素には、それほど大きな問題はありません。

しかし、小さな要素をドラッグすると、マウスがその要素に接続されなくなったことがわかります。また、要素をドロップすると、ドロップするはずだった場所から少し離れます。

マウスが要素上に留まり、ドロップするはずの場所にドロップするという解決策を見つけようとしています。

私は少しずつ問題を解決しましたが、以下を見ることができますが、これは私を怒らせているパズルの最後のピースです。誰かが手を貸す時間があれば、すごくいただければ幸いです。

これがコードペンです。2つの青い要素をクリックして白いコンテナにドラッグして試してください。

Codepen

全画面表示

動作中の短いGIF

これは、ドロップ可能な領域がスケーリングされたコンテナで機能することを確認するのに役立ちます。

$.ui.ddmanager.prepareOffsets = function(t, event) {
  var i, j, m = $.ui.ddmanager.droppables[t.options.scope] || [],
    type = event ? event.type : null,
    list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack();
  droppablesLoop: for (i = 0; i < m.length; i++) {
    if (m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0], (t.currentItem || t.element)))) {
      continue;
    }
    for (j = 0; j < list.length; j++) {
      if (list[j] === m[i].element[0]) {
        m[i].proportions().height = 0;
        continue droppablesLoop;
      }
    }
    m[i].visible = m[i].element.css("display") !== "none";
    if (!m[i].visible) {
      continue;
    }
    if (type === "mousedown") {
      m[i]._activate.call(m[i], event);
    }
    m[i].offset = m[i].element.offset();
    m[i].proportions({
      width: m[i].element[0].offsetWidth * percent,
      height: m[i].element[0].offsetHeight * percent
    });
  }
};

スケーリングされたコンテナーで要素のサイズを変更できるようにします

function resizeFix(event, ui) {
  var changeWidth = ui.size.width - ui.originalSize.width,
    newWidth = ui.originalSize.width + changeWidth / percent,
    changeHeight = ui.size.height - ui.originalSize.height,
    newHeight = ui.originalSize.height + changeHeight / percent;
  ui.size.width = newWidth;
  ui.size.height = newHeight;
}

スケールされたコンテナでドラッグが機能するようにします

function dragFix(event, ui) { 
    var containmentArea = $("#documentPage_"+ui.helper.parent().parent().attr('id').replace(/^(\w+)_/, "")),
        contWidth = containmentArea.width(), contHeight = containmentArea.height();
    ui.position.left = Math.max(0, Math.min(ui.position.left / percent , contWidth - ui.helper.width()));
    ui.position.top = Math.max(0, Math.min(ui.position.top  / percent,  contHeight- ui.helper.height()));
}

ボックスにドラッグできるドラッグ可能な要素を作成しています。

.directive('draggableTypes', function() {
  return {
    restrict:'A',
    link: function(scope, element, attrs) {
      element.draggable({
        zIndex:3000, 
        appendTo: 'body', 
        helper: function(e, ui){ 
          var formBox = angular.element($("#formBox"));
          percent = formBox.width() / scope.templateData.pdf_width;
          if(element.attr('id') == 'textbox_item')
              return $('<div class="text" style="text-align:left;font-size:14px;width:200px;height:20px;line-height:20px;">New Text Box.</div>').css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')'});
          if(element.attr('id') == 'sm_textbox_item')
              return $('<div class="text" style="text-align:left;font-size:14px;width:5px;height:5px;line-height:20px;"></div>').css({ 'transform': 'scale(' + percent + ')', '-moz-transform': 'scale(' + percent + ')', '-webkit-transform': 'scale(' + percent + ')', '-ms-transform': 'scale(' + percent + ')'});
          }
      });
    }
  };
})

既にボックスにある可能性のあるドラッグ可能/サイズ変更可能な要素を作成し、これらにドラッグ/サイズ変更の修正を適用します

.directive('textboxDraggable', function() {
  return {
    restrict:'A',
    link: function(scope, element, attrs) {

        element.draggable({ 
            cursor: "move",
            drag: dragFix,
            start: function(event, ui) {
                var activeId = element.attr('id');
                scope.activeElement.id = activeId;
                scope.activeElement.name = scope.templateItems[activeId].info.name;
                scope.$apply();
            }
        });

        element.resizable({
            minWidth: 25,
            minHeight: 25,
            resize: resizeFix,
            stop: function( event, ui ) {

                var activeId = element.attr('id');

                scope.activeElement.duplicateName = false;
                scope.activeElement.id = activeId;
                scope.activeElement.name = scope.templateItems[activeId].info.name;

                scope.templateItems[activeId]['style']['width'] = element.css('width');
                scope.templateItems[activeId]['style']['height'] = element.css('height');

                scope.$apply();
            }
        })

    }
  };
})

アイテムがドロップされるとどうなりますか

.directive('droppable', function($compile) {
  return {
    restrict: 'A',
    link: function(scope,element,attrs){
        element.droppable({
            drop:function(event,ui) {
                 var draggable = angular.element(ui.draggable),
                    draggable_parent = draggable.parent().parent(),
                    drag_type = draggable.attr('id'),
                    documentBg = element,
                    x = ui.offset.left,
                    y = ui.offset.top,
                    element_top = (y - documentBg.offset().top - draggable.height() * (percent - 1) / 2) / percent,
                    element_left = (x - documentBg.offset().left - draggable.width() * (percent - 1) / 2) / percent,
                    timestamp = new Date().getTime();

                    //just get the document page of where the mouse is if its a new element
                    if(draggable_parent.attr('id') == 'template_builder_box_container' || draggable_parent.attr('id') == 'template_builder_container')
                        var documentPage = documentBg.parent().parent().attr('id').replace(/^(\w+)_/, "");
                    //if you are dragging an element that was already on the page, get parent of draggable and not parent of where mouse is
                    else var documentPage = draggable_parent.parent().parent().attr('id').replace(/^(\w+)_/, "");

                    if(drag_type == "textbox_item")
                    {
                        scope.activeElement.id = scope.templateItems.Push({
                            info: {'page': documentPage,'name': 'textbox_'+timestamp, 'type': 'text'},
                            style: {'text-align':'left','font-size':'14px','top':element_top+'px','left':element_left+'px', 'width':'200px', 'height':'20px'}
                        }) - 1;

                        scope.activeElement.name = 'textbox_'+timestamp;
                    }
                    else if(drag_type == "sm_textbox_item")
                    {
                        scope.activeElement.id = scope.templateItems.Push({
                            info: {'page': documentPage,'name': '', 'type': 'text'},
                            style: {'text-align':'left','font-size':'14px','top':element_top+'px','left':element_left+'px', 'width':'5px', 'height':'5px'}
                        }) - 1;

                        scope.activeElement.name = 'textbox_'+timestamp;
                    }
                    else {
                        scope.templateItems[scope.activeElement.id]['style']['top'] = draggable.css('top');
                        scope.templateItems[scope.activeElement.id]['style']['left'] = draggable.css('left');
                    }

                scope.$apply();
            }
        });
    }
  };
})

最後ですが、私のコントローラー

.controller('testing', function($scope, $rootScope, $state, $stateParams) {
  $scope.templateItems = [];
  $scope.activeElement = { id: undefined, name: undefined };
  $scope.templateData = {"id":"12345", "max_pages":1,"pdf_width":385,"pdf_height":800};
  $scope.clickElement = function(index)   { $scope.activeElement = { id: index, name: $scope.templateItems[index].info.name } }

});

これが私のhtmlの基礎です

<div id="formBox" ng-style="formbox(templateData.pdf_width)" zoom>
    <div class="trimSpace" ng-style="trimSpace(templateData.pdf_width)" zoom>
        <div id="formScale" ng-style="formScale(templateData.pdf_width)" zoom>
            <form action="#" id="{{ templateData.id }}_form">
                <div ng-repeat="key in [] | range:templateData.max_pages">              
                    <div class="formContainer" id="{{ templateData.id + '_' + (key+1) }}" ng-style="{width: templateData.pdf_width+'px', height: templateData.pdf_height+'px'}">
                        <div class="formContent">
                            <div class="formBackground" id="documentPage_{{ (key+1) }}" droppable>
                                <div ng-hide="preview" ng-repeat="item in templateItems">
                                    <div ng-if="item.info.page == (key+1) && item.info.type == 'text'" id="{{ $index }}" data-type="{{ item.info.type }}" ng-click="clickElement($index)" class="text" ng-style="item.style" textbox-draggable>{{ item.info.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>          
            </form>
        </div>
    </div>
</div>
javascriptjqueryangularjsjquery-ui-draggablejquery-ui-droppable
42
bryan

ドラッグ中のカーソル位置については、この回答を参照してください： jquery-uiドラッグ可能なメソッドでui.helperの中央にカーソル位置を作成

基本的に、インスタンスのカーソル位置を制御して、cursorAtよりも動的なものにすることができます。このような：

start: function(event, ui){
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }
},

次に、dropで変換を考慮する必要がありますが、helper座標をドラッグ可能。このような：

element_top = (ui.helper.offset().top / percent) - (documentBg.offset().top / percent);
element_left = (ui.helper.offset().left / percent) - (documentBg.offset().left / percent);

結果： https://codepen.io/anon/pen/jamLBq

5
Julien Grégoire

これがlookを引き起こしている原因は次のとおりです：

まず、小さなdivはdisplay: block。これは、divが小さいように見えても、実際にはその要素がコンテナ全体に伸びていることを意味します。

2つ目は、ドラッグした四角を左画面に表示すると、マウスカーソルと要素全体の関係が技術的に中央揃えになりますが、元の要素のサイズを小さくして、幅と高さが小さくなります。 、結果は、元のdivの左上隅から始まる新しい幅と高さでレンダリングされます。 （小さなボタンのスタイルをdisplay: inline、あなたは私が何を意味するかを見ることができます。左上隅からそれをつかんでみて、右下隅からみてください。前者は問題ないように見えますが、後者はオフになっています）。

だから私の提案は：

  1. Draggabble要素を作成するdisplay: inline
  2. 左画面でドラッグされた要素を、右画面での元の要素の正確な高さと幅にします。

お役に立てば幸いです。

1
WeHateNick

この問題は、transformを要素のスタイルに追加してからドラッグ可能にすると発生します。完璧な結果を得るには、transformなしで済ませる必要があります。私はそれが見つかるまで2日間デバッグしましたが、他の誰かにその苦痛を経験してほしくありませんでした。

0
Aanand Kainth

ドラッグ中にカーソルで要素をアタッチするには、使用するだけです

cursorAt: { top: 6, left: -100 }

また、「sm_textbox_item」の上部と左側のパラメータが少し変更されました。

top: (y - documentBg.offset().top) / (percent) + "px",
left: (x - documentBg.offset().left) / (percent) + "px",

大きなボックスの場合も、上と左の要素にいくつかの微調整が必​​要です（ペンを更新）。

top: element_top-3, left: element_left+6.49,

私はあなたのペンをフォークして、いくつかの変更を行いました。これは完璧な解決策ではないことを知っています。これも少しずつ解決しようとしています。あなたはできます ここでチェックしてください

0
Nidhin Chandran

@ITWitchは正しいです。draggable()にはいくつかのバグがあるはずです。 _margin: 0 auto;_のスタイル_#sm_textbox_item_が問題の原因です。

これをdraggableTypeディレクティブのドラッグ可能なオプションに追加して、位置を修正してください。

cursorAt: {left: -parseInt(window.getComputedStyle(element[0],null,null)['margin-left'])},

0
Konrad Ślusarczyk

私はあなたのコードペンを分岐し、それで遊んだ。

こちらをご覧ください、それが「バグ」を見つけるのに役立つかどうかを確認してください。

draggableスクリプトのコードを次のように変更して、margin-leftとmargin-rightを追加します。

if(element.attr('id') == 'sm_textbox_item') { /* the small draggable box */
  var el = {
    pos: element.offset(), // position of the small box
    height: element.outerHeight() + 20,
    left: 0
  }
  var deduct = $('#formBox').innerWidth() - 20; // width of the element that's left of small box's container
  el.left = el.pos.left - deduct;

  return $('<div class="text" style="text-align:left; font-size:14px; width:5px; height:5px; line-height:20px;"></div>')
    .css({
      'margin-left': el.left + 'px',
      'margin-top': el.pos.top - el.height + 'px',

      'transform': 'scale(' + percent + ')',
      '-moz-transform': 'scale(' + percent + ')',
      '-webkit-transform': 'scale(' + percent + ')',
      '-ms-transform': 'scale(' + percent + ')'
    });
}

次に、droppableスクリプトについて、element_topおよびelement_leftの式を変更しました。

// old formula
element_top = (y - documentBg.offset().top - draggable.height() * (percent - 1) / 2) / percent
element_left = (x - documentBg.offset().left - draggable.width() * (percent - 1) / 2) / percent

// new formula
element_top = (y - documentBg.offset().top) / (percent * 0.915)
element_left = (x - documentBg.offset().left) / (percent * 0.915)

「ほぼ」正確な結果が得られますが、さらに調整して磨くことができる場合があります。お役に立てれば。

0
ITWitch