1

dragula.js でドラッグ アンド ドロップを使用して c3.js チャートを更新しようとしていますが、新しいコンテナーにドラッグされた div の ID を取得する方法がわかりません。私のhtmlは次のようなものです：

<div id="collapse1" class="panel-collapse collapse">
    <div id="color1" class="form-inline">1</div>
    <div id="color2" class="form-inline">2</div>
    <div id="color3" class="form-inline">3</div>
</div>
<div id="collapse2" class="panel-collapse collapse">

</div>

そして、dragula.js を使用してドラッグ アンド ドロップしています。

dragula([collapse1,collapse2]);

私はjqueryに本当に慣れていませんが、この質問<div>に従って、ドロップインのIDにアクセスするために、次のcollapse2ようなことをしようとしていました:

alert($("#collapse1.collapse2 div:first").attr("id"));

しかし、結果はありません。どんな助けでも本当に感謝します

4

2 に答える 2

2

Dragula には 3 つの要素があります。その 1 つは、ソース Div、ターゲット Div、および関連する要素です。バージョンの問題がある get() メソッドを使用していないことを除いて、次のメソッドはチャームとして機能します。両方を試すことができます。Dragula は、ドロップされた div、ソース Div、ターゲット Div の ID を提供します。

   const dragula = Dragula(['', '']);
      dragula.on('drop', (el, target, source, sibling) => {
        const elementId = $(el).attr("id");
        const targetID = $(target).attr("id");
        const sourceId = $(source).attr("id");
}
于 2016-10-15T12:05:51.880 に答える
0

私はドラグラに詳しくないので、質問に直接答えることはできません。しかし、私は jqueryUI のドラッグ ドロップを広範囲に使用しており、これは非常に優れたツールです。そのフレームワークを試してみたいと思うかもしれません。

あなたが例を求めたので、私は私の古いコードのいくつかを掘り下げました。これを見る前に、jqueryUI のドラッグ可能およびドロップ可能チュートリアルに目を通し、背景を説明することをお勧めします。関数の一部を含めました。コードが省略されている場所を示すために、小さなドットを配置しました。<<< の次に重要な行を入れました。クロージャーを使用して、さまざまな部分で参照を利用できるようにする方法に注目してください。閉鎖はすっごく素晴らしいです。私はその死を悪用するので、できれば使い方を学んでください。

ドラッグ オブジェクトを取得したら、それが求められていることに注意してください。後でドラッグ可能オブジェクトを登録するときに、変数を関数に参照する方法に注意してください。

ところで、参照されている停止ドラッグ機能もあることに注意してください。これの定義は示していません。dragObject の宣言を startDrag の外側に移動すると、関数の定義がレジスタ関数の外側に「囲まれている」ため、stopDrag からも参照できます。

function tapeChart_registerDraggables(parentObject,scope) {

    if ((parentObject==null)||(parentObject==undefined)) {
        parentObject=$jq(document.body);
    }

    var availablesShow = false;
    var savingToServer = false;
    var dragClone = null;

    var startDrag = function(event, ui) {

        tapeChartDraggingReservation = true;

        var dragObject = event.target;  <<<<<<

       if (dragObject.getAttribute("unassigned")=="true") {
            var is_chrome = window.chrome;
            var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
            if (!is_chrome && !is_safari) {
                $(ui.helper).css("margin-left", event.clientX - $(dragObject).offset().left);
                $(ui.helper).css("margin-top", event.clientY - $(dragObject).offset().top);               
            }
        }

        ...

        // assigned rooms
    if (scope!="UNBLOCKED") {
        // register items in the grid
        $(parentObject).find( ".NODRAGHELPER" ).draggable(
            {   
                snap : "true",                
                revert : "invalid",
                start: startDrag,  <<<<
                stop: stopDrag
            }
        )
        .click(function(){
            if ( $(this).is('.NODRAGHELPER-dragging') ) {
                return;
            }

            // seems that the user can drop and click fast
            // prevent this
            if (!savingToServer) {
                tapeChart_getReservation(this);
            }
            return false;
        });
    }

    ...
于 2016-08-18T03:45:05.837 に答える