Fatal编程技术网
  • jquery/
  • Jquery 替换项目<；李>；在静态列表中<；ul>；通过拖动的项目<；李>；来自可排序列表<；ul>；

Jquery 替换项目<；李>；在静态列表中<；ul>；通过拖动的项目<；李>；来自可排序列表<；ul>；

jquery replace

Jquery 替换项目<；李>；在静态列表中<；ul>；通过拖动的项目<；李>；来自可排序列表<；ul>；,jquery,drag-and-drop,replace,jquery-ui-sortable,Jquery,Drag And Drop,Replace,Jquery Ui Sortable,我正在努力将jQuery的拖放功能与jQuery UI sortable结合起来。我想用拖到HTML列表中的另一个项目（也是一个li标记）替换该项目（li标记） 所以在项目上，而不是列表上必须将其放置在特定位置，而不是添加到列表的末尾我不想附加它。 我拖动的项来自另一个可排序的列表。（我不知道这有没有关系。） 这是我的代码： HTML: <div id="source" class="listBlock"> <ul class="Sortable

我正在努力将jQuery的拖放功能与jQuery UI sortable结合起来。我想用拖到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>
你能帮我吗，最好是用一些示例代码？非常感谢

[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');
    });
}

var maxFieldLength=30；
$（文档）.ready（函数（）{
$（“.detailsBlock”）.find（“tbody”）.show（）；
$（“.showDetails”）.addClass（“活动”）；
初始化headermap（）；
$（“#重置按钮”）。单击（函数（）{
$（'span.headerText img'）。每个（函数（索引）{
$（此选项）。单击（）；
});
});
$（“ul.SourceList li”）.draggable({
不透明度：0.6，
回复：真
});
$（“ul.TargetList li”）。可拖放({
drop：函数（事件、用户界面）{
PlaceInSlot（ui.draggable，$（this））；
}
});
});
函数OnNextClick（）{
CreateHeaderMap（）；
返回true；
}
函数OnPreviousClick（）{
CreateHeaderMap（）；
返回true；
}
函数初始化HeaderMap（）{
var-map=[]；
var headerMap=$（'input[name=headerMap]'）。val（）；
如果（（headerMap！==null）&&（headerMap！==未定义）&&（headerMap.length>0））{
试一试{
map=JSON.parse（headerMap）；
}捕捉（错误）{
map=''；
}
}
$.each（映射、函数（键、映射对象）{
如果（mapObject.HeaderIndex！=-1）{
var header=$（“ul.SourceList li:icontains（“+mapObject.header+”））；
//仅在找到标题文本时放入插槽
if（header.text（）.length>0）{
var slot=$（“ul.TargetList li[id=“+mapObject.Item+”]）；
PlaceInSlot（收割台、槽）；
}
}
});
}
函数CreateHeaderMap（）{
var-map=[]；
$（“li.item”）。每个（函数（）{
var obj={}；
obj['Item']=$（this.attr（'id'）；
var position=$（this.find（'span.headerText input'）.val（）；
如果（（位置=='undefined'）| |（位置===null））{
位置=-1；
}
obj['HeaderIndex']=位置；
如果（位置！=“未定义”）{
obj['Header']=$（this.children（'span.headerText'）.text（）.trim（）；
}否则{
obj['Header']=''；
}
地图推送（obj）；
});
$（'input[name=HeaderMap]'）.val（JSON.stringify（map））；
}
功能位置插槽（元件、插槽）{
$（slot.children（“span.slotText”）.hide（）；
var revertImg=''；
$（slot.children（“span.headerText”）.html（$（element.html（））.append（revertImg）；
$（slot.parent（）.addClass（“ui状态默认值”）；
$（插槽）.removeClass（“验证错误”）；
$（插槽）。可拖放({
残疾人士：对
});
var importRowFile=$（元素）.val（）；
$（插槽）.attr（“值”，导入文件）；
$（元素）.hide（）；
$（插槽）。查找（“span.headerText img”）。单击（函数（）{
$（元素）.show（）；
$（slot.children（“span.slotText”）.show（）；
$（slot.children（“span.headerText”）.html（“”）；
$（插槽）.addClass（“插槽”）；
$（插槽）。可拖放({
禁用：false
});
$（插槽）.off（'click'）；
});
}
请参阅fiddle:

我相信可以通过其类名（例如“ui项可拖放”）将每个单独的项设置为“可拖放”，然后在拖放事件上执行交换

JQuery示例使用它，因此包含的项是可拖放的容器，但是没有理由不能将其更改为所有包含的项

您不会受到任何性能影响，因为您只是声明该类是可删除的，而不是目标容器中的每一项

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');
    });
}