CSS переход при перемещении элемента из div в другой div

Question

CSS переход при перемещении элемента из div в другой div

0

Я пытаюсь использовать jquery html() для перемещения элемента. См. Пример ниже.

HTML:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

<div id="myDiv"></div>

Jquery:

//on some event (for example, onclick, onmouseover, onkeydown....), the code below will be triggered
var $myDiv = $("#myDiv");
$("#div1").html($myDiv);
//after some other event, the code below will be triggered
$("#div5").html($myDiv);
//after some other event, the code below will be triggered
$("#div4").html($myDiv);
//etc....

В основном, я пытаюсь переместить $ myDiv среди div1-5, используя метод html() выше. Но я тоже хочу иметь переход, когда $ myDiv перемещается из одного div в другой div. Я попробовал следующий css, но он не работал. CSS:

#myDiv {
    -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
    transition: all 1s linear;
}

Я не знаю размер всех div и размер может измениться, поэтому я не могу использовать переход сверху и влево.

Надеюсь, у кого-то может быть хорошее решение.

благодаря

shane716 05 нояб. 2013, в 18:28

Источник

2

Вы не «двигаете» #myDiv с помощью html() , вы вводите его. Если вы хотите применить переход на ходу, одним из вариантов может быть использование абсолютного позиционирования и перехода на left или top свойстве, но, не зная точно, что вы делаете, я не могу сказать наверняка.
Mister Epic 05 нояб. 2013, в 16:57

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Вы не «двигаете» #myDiv с помощью html() , вы вводите его. Если вы хотите применить переход на ходу, одним из вариантов может быть использование абсолютного позиционирования и перехода на left или top свойстве, но, не зная точно, что вы делаете, я не могу сказать наверняка.

tomsullivan1989 · Answer 1 · 2013-11-05T15-51-00.000Z

Вы можете использовать jQuery sortable plugin.

Вы можете дать каждому перетаскиваемому div an in sortable, а затем использовать следующий jQuery:

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

Помните, что вам нужно будет включить jQuery UI:

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>