4

SVGを使用して座席予約Webアプリを構築しようとしています。想像してみてください。svgに長方形を作成しました。これは空いている席を表しています。ユーザーが「rect」にhtml「image」要素をドロップして座席を予約できるようにしたい。

ただし、DroppableをSVG要素で動作させることができませんでした。なぜこれがそうなのか誰にも分かりますか？コードは次のとおりです。

$('#target').svg();
var svg = $("#target").svg('get');
svg.rect(20, 10, 100, 50, 10, 10, { fill: '#666', class: "droppable" });
$('rect')
        .droppable({
           accept: '.product',
           tolerance: 'touch',
           drop: function (event, ui) {
              alert('df');
           }
        }
4

4 に答える 4

8

jQuery-uiソースを調べて、SVGで機能しない理由を理解しました。jQueryは、幅と高さが0pxであると見なすため、交差テストは失敗します。

$ .ui.intersectをラップし、引数を元の関数に渡す前に正しいサイズ情報を設定しました。修正が必要なプロポーションオブジェクトがもっとあるかもしれませんが、ここで行った2つで修正できます：

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function(draggable, droppable, toleranceMode) {
    //Fix helper
    if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
        draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
        draggable.helperProportions = draggable.helperProportionsBBox;
    }

    //Fix droppable
    if (droppable.proportions && droppable.proportions.width === 0 && droppable.proportions.height === 0) {
        droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
        droppable.proportions = droppable.proportionsBBox;
    }

    return $.ui.intersect_o(draggable, droppable, toleranceMode);
};
于 2014-06-18T01:44:59.387 に答える
3

jQuery UI 1.11.4では、draggable.proportionsが関数になっているため、Eddieのソリューションを次のように変更する必要がありました。

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
//Fix helper
if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
   draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
   draggable.helperProportions = draggable.helperProportionsBBox;
}

if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
   if (typeof $(droppable.element).get(0).getBBox === "function") {
       droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
       droppable.proportions = function () {
           return droppable.proportionsBBox;
       };
   }

    return $.ui.intersect_o(draggable, droppable, toleranceMode, event);
};
于 2016-05-25T13:21:22.567 に答える
1

svg要素のドロップを、表示されているコンテンツのみにヒットするように制限する場合（たとえば、ポリゴン）、PeterBaumannの提案にこの追加を使用することをお勧めします。

$.ui.intersect_o = $.ui.intersect;
$.ui.intersect = function (draggable, droppable, toleranceMode, event) {
    //Fix helper
    if (draggable.helperProportions && draggable.helperProportions.width === 0 && draggable.helperProportions.height === 0) {
        draggable.helperProportionsBBox = draggable.helperProportionsBBox || $(draggable.element).get(0).getBBox();
        draggable.helperProportions = draggable.helperProportionsBBox;
    }

    if (droppable.proportions && !droppable.proportions().width && !droppable.proportions().height)
        if (typeof $(droppable.element).get(0).getBBox === "function") {
            droppable.proportionsBBox = droppable.proportionsBBox || $(droppable.element).get(0).getBBox();
            droppable.proportions = function () {
                return droppable.proportionsBBox;
            };
        }

    var intersect = $.ui.intersect_o(draggable, droppable, toleranceMode, event);
    if (intersect) {
        var dropTarget = $(droppable.element).get(0);
        if (dropTarget.ownerSVGElement && (typeof (dropTarget.isPointInFill) === 'function') && (typeof (dropTarget.isPointInStroke) === 'function')) {
            var x = ( draggable.positionAbs || draggable.position.absolute ).left + draggable.margins.left + draggable.helperProportions.width / 2,
                y = ( draggable.positionAbs || draggable.position.absolute ).top + draggable.margins.top  + draggable.helperProportions.height / 2,
                p = dropTarget.ownerSVGElement.createSVGPoint();
            p.x = x;
            p.y = y;
            p = p.matrixTransform(dropTarget.getScreenCTM().inverse());
            if(!(dropTarget.isPointInFill(p) || dropTarget.isPointInStroke(p)))
                intersect = false;
        }
    }
    return intersect;
};
于 2016-06-09T12:20:25.850 に答える
0

誰かが同じ質問を念頭に置いている場合、droppableはjquerySVGでは機能しません。したがって、最終的に、独自のドロップ可能なイベントを作成するために次のことを行いました。

  1. draggableで、現在ドラッグされているターゲットをdraggedObjに設定します。

  2. マウスアップイベントで、draggedObjがnullかどうかを確認し、nullでない場合は、現在の位置に従ってアイテムをドロップします。（現在の位置の検出についてサポートが必要な場合はお知らせください）

于 2012-09-27T01:28:50.607 に答える