1

Как один div перетащить мышкой в другой? Я хочу какой-нибудь из блоков справа перетащить в левый и, если в левом блоке уже ранее вставлен другой, то заменить его.

Можно ли такое реализовать на JQuery?

.content { border:1px solid #CCC; width:200px; height:100px; padding:5px; margin:10px 0px;}
.box { width:200px; height:50px; margin:10px 0px; border:1px solid #CCC;}
<div style="float:left;">
  <div class="content">сюда перетаскивать контент</div>
  <div class="content">или сюда перетаскивать контент</div>
  <div class="content">или сюда перетаскивать контент</div>
</div>

<div style="float:right;">
  <div class="box">Перетащить box1</div>
  <div class="box">Перетащить box1</div>
  <div class="box">Перетащить box1</div>
  <div class="box">Перетащить box1</div>
</div>

1

1 ответ 1

1

Да можно. Нужно использовать draggable и droppable.

$(function(){
        $(".box").draggable();
        $(".content").droppable({
        accept: '.box',
        drop: function(event, ui) {
                $(".box",this).remove();
                    $(this).append(ui.draggable);
                    $(ui.draggable).removeAttr( 'style' );
                }
            }); 
    });

Вот пример https://jsfiddle.net/a9psqm6v/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.