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

Posted 2023-05-08

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

【英文标题】：How to remove the text of sortable area when item is dropped on it?

【发布时间】：2019-04-06 14:56:17

【问题描述】：

我有以下代码来执行元素的排序和拖放。在这里，我无法删除“在此处拖放链接”。物品掉落时跟随div。

<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>

【参考方案1】：

如下改变你的接收函数

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

工作小提琴here

【讨论】：

这不是我要找的，这只是附加文本而不是div

哦。得到答案了吗？

您可以使用.html 而不是.text，这将给出准确的结果。

【参考方案2】：

您可以通过stop 回调来实现。

在您的代码中添加了以下 sn-p。

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>

【讨论】：

添加了一个条件来回答，所以如果你放在.sortable div 以外的地方，那么它不会删除文本。还提到了.html()的另一种方式。