将项目放在可排序区域上时如何删除可排序区域的文本？

Question

我有以下代码来执行元素的排序和拖放。在这里，当项目被删除时，我无法从跟随 div 中删除 "Drag and drop link here."。

<div class="mega-menu-container sortable ui-sortable">
    Drag and drop link here.
</div>

当我运行

stop: function(event, ui) {
    var item = $(ui.item);
    if ($sender !== "") {
        if ($(this).text().length > 0) {
           $(this).text("");
        }
    }

停止事件时，不会添加掉落的物品。

var $receiver = "";
var $sender = "";
$(".sortable").sortable({
    start: function(event, ui) {
        $receiver = "";
        $sender = "";
    },
    connectWith: ".sortable",
    placeholder: "ui-state-hover",
    receive: function(event, ui) {
        $sender = ui.sender;
        $receiver = $(this);
        $receiver.text().replace("Drag and drop link here.", "");
    },
    stop: function(event, ui) {
        var item = $(ui.item);
        if ($sender !== "") {
            //if ($(this).text().length > 0) {
            //    $(this).text("");
            //}
        }
    },
    cursor: "move"
}).disableSelection();

$(".menu-items>.menu-item[data-type='link']").draggable({
    helper: "clone",
    connectToSortable: ".sortable",
    cursor: "move",
    start: function(event, ui) {
        $sender = $(this).parent();
    },
    revert: "invalid"
});

$(".menu-items>.menu-item[data-type='container']").draggable({
    helper: "clone",
    connectToSortable: ".sortable>[data-level='1']",
    placeholder: "ui-state-hover",
    cursor: "move",
    start: function(event, ui) {
        $sender = $(this).parent();
    },
    revert: "invalid"
});

.menu-items > .menu-item {
    margin: 0 15px;
    padding: 15px;
    min-height: 30px;
}

.sortable {
    border: dashed 1px rgba(9, 9, 9, 0.3);
    padding: 20px !important;
}

.menu-item {
    background: #fff;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid #ccc !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="menu-items" style="widht:30%;">
    <div class="menu-item" data-type="link" style="float: left;widht:40%;">
        <i class="fa fa-arrows" aria-hidden="true"></i>
        <div class="title">Link</div>
    </div>
    <div class="menu-item ui-draggable" data-type="container" style="float: left;widht:40%;">
        <i class="fa fa-arrows" aria-hidden="true"></i>
        <div class="title">Container</div>
    </div>
</div>
<div style="clear:both;"></div>
<div class="mega-menu-container sortable ui-sortable">
    Drag and drop link here.
</div>

Answer 1

按如下方式更改您的接收函数

receive: function(event, ui) {
    $sender = ui.sender;
    $receiver = $(this);
    $replace_text = $receiver.text().replace("Drag and drop link here.", "");
    $receiver.text($replace_text);
}

工作fiddlehere

Answer 2

您可以通过 stop 回调实现。

在您的代码中添加了以下代码段。

stop: function(event, ui) {
    var divs = $('.sortable>div');
    if ($('.sortable>div').length > 0) {
        // $('.sortable').html('').append(divs);
        $('.sortable').html($('.sortable').html().replace("Drag and drop link here.", ""));
    }
},

var $receiver = "";
var $sender = "";
$(".sortable").sortable({
    start: function(event, ui) {
        $receiver = "";
        $sender = "";
    },
    connectWith: ".sortable",
    placeholder: "ui-state-hover",
    receive: function(event, ui) {
        $sender = ui.sender;
        $receiver = $(this);
        $receiver.text().replace("Drag and drop link here.", "");
    },
    stop: function(event, ui) {
        var item = $(ui.item);
        if ($sender !== "") {
            //if ($(this).text().length > 0) {
            //    $(this).text("");
            //}
        }
    },
    cursor: "move"
}).disableSelection();

$(".menu-items>.menu-item[data-type='link']").draggable({
    helper: "clone",
    connectToSortable: ".sortable",
    cursor: "move",
    start: function(event, ui) {
        $sender = $(this).parent();
    },
    stop: function(event, ui) {
        var divs = $('.sortable>div');
        if ($('.sortable>div').length > 0) {
            // $('.sortable').html('').append(divs);
            $('.sortable').html($('.sortable').html().replace("Drag and drop link here.", ""));
         }
    },
    revert: "invalid"
});

$(".menu-items>.menu-item[data-type='container']").draggable({
    helper: "clone",
    connectToSortable: ".sortable>[data-level='1']",
    placeholder: "ui-state-hover",
    cursor: "move",
    start: function(event, ui) {
        $sender = $(this).parent();
    },
    revert: "invalid"
});

.menu-items > .menu-item {
    margin: 0 15px;
    padding: 15px;
    min-height: 30px;
}

.sortable {
    border: dashed 1px rgba(9, 9, 9, 0.3);
    padding: 20px !important;
}

.menu-item {
    background: #fff;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.65);
    border: 1px solid #ccc !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="menu-items" style="widht:30%;">
    <div class="menu-item" data-type="link" style="float: left;widht:40%;">
        <i class="fa fa-arrows" aria-hidden="true"></i>
        <div class="title">Link</div>
    </div>
    <div class="menu-item ui-draggable" data-type="container" style="float: left;widht:40%;">
        <i class="fa fa-arrows" aria-hidden="true"></i>
        <div class="title">Container</div>
    </div>
</div>
<div style="clear:both;"></div>
<div class="mega-menu-container sortable ui-sortable">
    Drag and drop link here.
</div>

将项目放在可排序区域上时如何删除可排序区域的文本？

How to remove the text of sortable area when item is dropped on it?

javascript

jquery

jquery-ui

drag-and-drop

jquery-ui-sortable