2

ソート可能なjQueryUIと組み合わせたjQueryのドラッグアンドドロップ機能に苦労しています。HTMLリスト内のアイテム（liタグ）を、ドラッグされた別のアイテム（liタグ）に置き換えたい。

だから、リストではなく、アイテムに！特定の場所に配置する必要があり、リストの最後に追加しないでください。付け加えたくない。

ドラッグしたアイテムは、並べ替え可能な別のリストからのものです。（これが重要かどうかはわかりません。）

これは私が持っているコードです：

HTML：

<div id="source" class="listBlock">            
    <ul class="Sortable">
        <li class="ui-state-default" id="item1">Item 1</li>
        <li class="ui-state-default" id="item2">Item 2</li>
        <li class="ui-state-default" id="item3">Item 3</li>
        <li class="ui-state-default" id="item4">Item 4</li>
    </ul>
</div>                            

<div id="target" class="listBlock">            
    <ul class="DropTrue">
        <li class="ui-state-default slot" id="slot1">SLOT 1</li>
        <li class="ui-state-default slot" id="slot2">SLOT 2</li>
        <li class="ui-state-default slot" id="slot3">SLOT 3</li>
        <li class="ui-state-default slot" id="slot4">SLOT 4</li>
    </ul>
</div>

Javascript（jQuery1.7.2およびjQueryUI 1.8.18を使用）：

$(function() {
        $("ul.Sortable").sortable({
            connectWith: 'ul',
            opacity: 0.6,
        });
    });

できればサンプルコードを使って、私を助けてくれませんか？とても有難い。

[2014年12月3日編集]

完全に機能する実装：

var maxFieldLength = 30;

$(document).ready(function () {

    $(".detailsBlock").find("tbody").show();
    $(".showDetails").addClass("active");

    InitializeHeaderMap();

    $('#ResetButton').click(function () {
    $('span.headerText img').each(function (index) {
        $(this).click();
    });
    });

    $("ul.SourceList li").draggable({
    opacity: 0.6,
    revert: true
    });

    $("ul.TargetList li").droppable({
    drop: function (event, ui) {
        PlaceInSlot(ui.draggable, $(this));
    }
    });
});

function OnNextClick() {
    CreateHeaderMap();
    return true;
}

function OnPreviousClick() {
    CreateHeaderMap();
    return true;
}

function InitializeHeaderMap() {
    var map = [];
    var headerMap = $('input[name=HeaderMap]').val();

    if ((headerMap !== null) && (headerMap !== undefined) && (headerMap.length > 0)) {
    try {
        map = JSON.parse(headerMap);
    } catch (err) {
        map = '';
    }
    }

    $.each(map, function (key, mapObject) {
    if (mapObject.HeaderIndex != -1) {
        var header = $("ul.SourceList li:icontains(" + mapObject.Header + ")");
        // Only place in slot when the header text is found
        if (header.text().length > 0) {
        var slot = $("ul.TargetList li[id=" + mapObject.Item + "]");
        PlaceInSlot(header, slot);
        }

    }
    });
}

function CreateHeaderMap() {

    var map = [];

    $("li.item").each(function () {

    var obj = {};
    obj['Item'] = $(this).attr('id');
    var position = $(this).find('span.headerText input').val();
    if ((position === 'undefined') || (position === null)) {
        position = -1;
    }
    obj['HeaderIndex'] = position;
    if (position !== 'undefined') {
        obj['Header'] = $(this).children('span.headerText').text().trim();
    } else {
        obj['Header'] = '';
    }

    map.push(obj);
    });

    $('input[name=HeaderMap]').val(JSON.stringify(map));
}

function PlaceInSlot(element, slot) {
    $(slot).children("span.slotText").hide();

    var revertImg = '<img name="image" src="https://dl.dropbox.com/s/z4cehkuhv2mj502/Prullie_1_12.png" width="12" height="12" />';

    $(slot).children("span.headerText").html($(element).html()).append(revertImg);

    $(slot).parent().addClass("ui-state-default");

    $(slot).removeClass("validation-error");

    $(slot).droppable({
    disabled: true
    });

    var importRowFile = $(element).val();

    $(slot).attr("value", importRowFile);

    $(element).hide();

    $(slot).find("span.headerText img").click(function () {
    $(element).show();

    $(slot).children("span.slotText").show();
    $(slot).children("span.headerText").html('');
    $(slot).addClass("slot");
    $(slot).droppable({
        disabled: false
    });
    $(slot).off('click');
    });
}

フィドルを参照してください：http：//jsfiddle.net/RWCH/9DPCW/

4

1 に答える 1

0

「ui-item-droppable」などのクラス名で個々のアイテムを「ドロップ可能」にし、ドロップイベントでスワップを実行できると思います。

JQuery の例では、含まれているアイテムはドロップ可能なコンテナーですが、それをすべての含まれているアイテムに変更できない理由はありません。

ターゲット コンテナー内のすべてのアイテムではなく、クラスがドロップ可能であると述べているだけなので、パフォーマンスが低下することはありません。

于 2012-11-03T07:52:10.703 に答える