模擬Microsoft Accessクエリウィザード

リスト項目を結ぶ線を描きたいとこの例ではの1つです。ユーザーがウィジェットをドラッグすると、その行は5つ1つに接続されたままになります。模擬Microsoft Accessクエリウィザード

$('.ui-widget-content').draggable({ 
 
\t handle: '.ui-widget-header' } 
 
) 
 
$('.ui-widget-header').disableSelection()

.ui-widget-content { 
 
\t width: 100px; 
 
\t height: 100px; 
 
} 
 
.ui-widget-header { 
 
\t cursor: move; 
 
} 
 
.list-unstyled { 
 
\t list-style-type:none; 
 
\t padding-left:10px; 
 
} 
 
.primaryKey, .secondaryKey { 
 
\t font-weight:bold 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>jQuery UI Draggable - Handles</title> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css"> 
 
</head> 
 
<body> 
 

 
<div class="ui-widget-content"> 
 
\t <div class="ui-widget-header">handle One</div> 
 
\t <ul class="list-unstyled"> 
 
\t \t <li class="primaryKey">One</li> 
 
\t \t <li>Two</li> 
 
\t \t <li>Three</li> 
 
\t </ul> 
 
</div> 
 

 
<div class="ui-widget-content"> 
 
\t <div class="ui-widget-header">handle Two</div> 
 
\t <ul class="list-unstyled"> 
 
\t \t <li>Four</li> 
 
\t \t <li class="secondaryKey">Five</li> 
 
\t \t <li>Six</li> 
 
\t </ul> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

出典

2017-08-03 Phillip Senn

接続ポイントはどこにありますか？ "One"と "Five"の中心？直線？ – Twisty

あなたが正確なラインパスについてあまり心配していないなら、あなたはこのようにそれを行うことができます。

HTML

<div class="image"> 
    <div class="ui-widget-content" id="one"> 
    <div class="ui-widget-header">handle One</div> 
    <ul class="list-unstyled"> 
     <li class="primaryKey">One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
    </div> 

    <div class="ui-widget-content" id="two"> 
    <div class="ui-widget-header">handle Two</div> 
    <ul class="list-unstyled"> 
     <li>Four</li> 
     <li class="secondaryKey">Five</li> 
     <li>Six</li> 
    </ul> 
    </div> 
    <svg class="lines" width="100%" height="500"> 
    <line id="linePath_1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" /> 
    </svg> 
</div>

JavaScriptの

$(function() { 
    var offset = { 
    X: 0, 
    Y: 0 
    }; 

    function Point(x, y) { 
    return { 
     "X": x, 
     "Y": y 
    }; 
    } 

    function drawLine(pointA, pointB) { 
    var od = { 
     a: { 
     X: pointA.X - offset.X, 
     Y: pointA.Y - offset.Y 
     }, 
     b: { 
     X: pointB.X - offset.X, 
     Y: pointB.Y - offset.Y 
     } 
    }; 
    console.log(od); 
    $("#linePath_1").attr({ 
     x1: od.a.X, 
     y1: od.a.Y, 
     x2: od.b.X, 
     y2: od.b.Y 
    }) 
    } 

    $('.ui-widget-content').draggable({ 
    handle: '.ui-widget-header', 
    containment: ".image", 
    drag: function(e, ui) { 
     var pkA, pkB, pointA, pointB; 
     if ($(this).is("#one")) { 
     pkA = $("#one .primaryKey").position(); 
     pkB = $("#two .secondaryKey").position(); 
     pointA = Point($("#one").position().left + pkA.left, $("#one").position().top + pkA.top); 
     pointB = Point($("#two").position().left + pkB.left, $("#two").position().top + pkB.top); 
     console.log(pointA, pointB); 
     } else { 
     pkA = $("#two .secondaryKey").position(); 
     pkB = $("#one .primaryKey").position(); 
     pointA = Point($("#two").position().left + pkA.left, $("#two").position().top + pkA.top); 
     pointB = Point($("#one").position().left + pkB.left, $("#one").position().top + pkB.top); 
     console.log(pointA, pointB); 
     } 
     drawLine(pointA, pointB); 
    } 
    }); 
    $('.ui-widget-header').disableSelection(); 
});

これは、基本的には、バックグラウンドで<svg>要素を置き、dragコールバックの間に描かれ、更新される<line>を使用しています。必要ならばclientXとclientYをeventにすることができますが、鍵を接続しているように見えます。

.position()はdivの要素の{top, left}を提供することに注意してください。 .offset()を使用することもできます。

作業例：https://jsfiddle.net/Twisty/chdznLnx/

出典

2017-08-07 04:34:38 Twisty

クリーナーの例：https://jsfiddle.net/Twisty/chdznLnx/3/ – Twisty

ドットがありますか？ https://jsfiddle.net/Twisty/chdznLnx/6/ – Twisty

模擬Microsoft Accessクエリウィザード

答えて

関連する問題