Как убрать текст сортируемой области, когда на него упал предмет? - PullRequest
Новая
       17

Как убрать текст сортируемой области, когда на него упал предмет?

0 голосов
/ 02 ноября 2018

У меня есть следующий код для выполнения сортировки и перетаскивания элемента. Здесь я не могу удалить «Перетащите сюда ссылку». из следующего 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>

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Этого можно добиться с помощью 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>
0 голосов
/ 02 ноября 2018

Измените вашу функцию получения следующим образом 

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

Рабочая скрипка здесь

...