JQuery UI сортируемый - Как заменить существующий элемент или вставить новый перетаскиваемый в зависимости от позиции - PullRequest
Новая
       46

JQuery UI сортируемый - Как заменить существующий элемент или вставить новый перетаскиваемый в зависимости от позиции

1 голос
/ 24 августа 2011

Я хотел бы реализовать следующее:

  1. У меня есть исходный контейнер, заполненный списком перетаскиваемых элементов
  2. У меня есть цель сортируемый контейнер, заполненный элементами того же вида, что и исходные элементы

Когда я перетаскиваю элемент из источника в цель, я хотел бы решить, что делать с перетаскиваемым элементом (вспомогательный клон):

  • вставить до того, как мышь элемента закончится
  • заменить мышь мыши над элементом <- Новое требование! </em>
  • вставка после того, как элемент мыши закончился

Любая помощь высоко ценится!Спасибо!

Пример (без требуемой функции replace ) Демо http://jsfiddle.net/8eBDD/15/

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<script type="text/javascript">
function pageLoad() {
  $(function () {

    $( "#source .item" ).draggable({
      connectToSortable: '#target',
      cursor: 'move',
      helper: 'clone'
    }).disableSelection();

    $( "#target" ).sortable({
      // ----- remove item from container if dragged out ----
      receive: function (e, ui) { inout = 1; },
      over: function (e, ui) { inout = 1; },
      out: function (e, ui) { inout = 0; },
      beforeStop: function (e, ui) { if (inout == 0)  ui.item.remove(); },
      // ----------------------------------------------------

      dropOnEmpty: true,
      tolerance: 'pointer',
      placeholder: 'placeholder',
      cursor: 'move'
    }).disableSelection();
  });
};
</script>

<style type="text/css">
body {
    font-family: Arial;
}
.container {
    background-color: silver;
    padding: 5px;
}
.item {
    margin: 5px;
    padding: 3px;
    border: 1px dotted silver;
    background-color: white;
}
.placeholder {
    height: 1.5em;
}
</style>
</head>

<body>
SOURCE
<div id="source" class="container">
    <div class="item">draggable 1<br/>2<sup>nd</sup> line</div>
    <div class="item">draggable 2</div>
</div>
<br/>
TARGET
<div id="target" class="container">
    <div class="item">pre-filled 1</div>
    <div class="item">pre-filled 2</div>
</div>
</body>
</html>
...