Когда я делаю перемещаемый клон и отбрасываю его в сбрасываемом, я не могу перетащить его снова

Вы можете использовать псевдоэлемент, в котором вы применяете анимацию с пунктирной рамкой

.inner_wrap {
  max-width: 1140px;
  margin: 0 auto;
}

html,
body {
  font-family: 'Asap', sans-serif;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.boundary {
  width: 5%;
  height: 50px;
  background-color: steelblue;
}

.occupied0 {
  background-color: #1b4d15;
  color: #fff;
}

.occupied1 {
  background-color: red;
  color: #FFF;
}

.short {
  width: 32%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;
}

.long {
  width: 76%;
  height: 40px;
  display: block;
  margin: 10px 0px 10px 10px;
  line-height: 40px;
  text-align: left;
  padding-left: 10%;
}

td.range_supervisor {
  background-color: #663300;
  width: 12%;
  padding: 35px;
  background-clip: content-box;
}

table {
  background-color: white;
  text-align: left;
  border: 0px;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

table>tr>td {
  width: 25%;
}

tr:first-child td:first-child:before {
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:60px;
      background: 
        linear-gradient(90deg, blue 50%, transparent 50%) 0 0, 
        linear-gradient(90deg, blue 50%, transparent 50%) 100% 100%, 
        linear-gradient(0deg, blue 50%, transparent 50%) 100% 0, 
        linear-gradient(0deg, blue 50%, transparent 50%) 0 100%;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  transition: background-position 2s;
}

tr:first-child:hover td:first-child:before{
    background-position: 200px 0, calc(100% - 200px) 100%, 100% 50px,0 calc(100% - 50px);
}
<table class="inner_wrap">
  <tr>
    <td>
    </td>
    <td style="width:25%;">
      <button>RANGE 1</button>
    </td>
    <td class="boundary"></td>
    <td id="range1" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 2</button>
    </td>
    <td class="boundary"></td>
    <td id="range2" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 3</button>
    </td>
    <td class="boundary"></td>
    <td id="range3" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 4</button>
    </td>
    <td class="boundary"></td>
    <td id="range4" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td class="range_supervisor" rowspan="4">
      <button style=" 	writing-mode: vertical-lr;
  	text-orientation: upright;">supervisor</button>
    </td>
    <td>
      <button>RANGE 5</button>
    </td>
    <td class="boundary"></td>
    <td id="range5" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 6</button>
    </td>
    <td class="boundary"></td>
    <td id="range6" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 7</button>
    </td>
    <td class="boundary"></td>
    <td id="range7" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
      <button>RANGE 8</button>
    </td>
    <td class="boundary"></td>
    <td id="range8" class="long occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 9</button>
    </td>
    <td class="boundary"></td>
    <td id="range9" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 10</button>
    </td>
    <td class="boundary"></td>
    <td id="range10" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 11</button>
    </td>
    <td class="boundary"></td>
    <td id="range11" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <button>RANGE 12</button>
    </td>
    <td class="boundary"></td>
    <td id="range12" class="short occupied0">
      AVAILABLE
    </td>
  </tr>
</table>

55
задан bluish 18 January 2012 в 04:33
поделиться

3 ответа

Один из способов сделать это:

$(document).ready(function() {
    $("#container").droppable({
        accept: '.product',
        drop: function(event, ui) {
            $(this).append($("ui.draggable").clone());
            $("#container .product").addClass("item");
            $(".item").removeClass("ui-draggable product");
            $(".item").draggable({
                containment: 'parent',
                grid: [150,150]
            });
        }
    });
    $(".product").draggable({
        helper: 'clone'
    });
});

Но я не уверен, хорошее ли это и чистое кодирование.

51
ответ дан 7 November 2019 в 07:25
поделиться

Я нашел этот вопрос через Google. Я также не мог удерживать позиции от привязки к контейнеру, пока я не изменил ui.draggable на ui.helper при добавлении:

$(this).append($(ui.helper).clone());
26
ответ дан 7 November 2019 в 07:25
поделиться

Для тех, кто пытается переместить упавший предмет. Взгляните сюда.

Перетаскивание и клонирование JQuery .

Мне действительно пришлось использовать для этого код, похожий на

$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);

.

5
ответ дан 7 November 2019 в 07:25
поделиться
Другие вопросы по тегам:

Похожие вопросы: