Исчезает линия при переносе блока

154

29 мая 2019, 22:40

Есть функция Draggable, есть блоки на странице. Блоки могут перемещаться на странице. При клике на блок, появляется линия. Но, при малейшем перетаскивании блока, линия исчезает. Как можно поправить, чтобы линия не исчезала при переносе блока и перемещалась относительно положению блока ? может есть какое-то условие, чтобы линия привязалась к блоку? помогите плиз Исходник функции Draggable:

function draggable(){
$('.in_block').draggable({
    // snap: '#ordermaster_content_in',
    cursor: 'move',
    containment: '#ordermaster_content_in'
    start: function(e) {
        tutorial_reset();
        num = $(this).attr('id').split('_')[1];
        $('.line_'+num).remove();
        num = false;
        var h = $(this).height();
        $(this).parent().height(h);
        make_changes();
    }, 
    drag: function(e) {
    },
    stop: function(e) {
        $(this).height('auto');
    }
});}

Answer 1

Немного не понятно, по чему вы при start удаляете класс, который как я понял отвечает за полосу. Ниже привел пример простого перетаскивания, при перетаскивании к блоку добавляется класс

$( function() { 
 
  $('.block').draggable({ 
    revert: true,//Если установлено true, то элемент будет возвращен к его первоначальной позиции на странице, когда перетаскивание будет закончено. 
    zIndex: 100,//Опция устанавливает свойство z-index для подручного элемента, в момент перемещения. 
    revertDuration: 0,//Продолжительность анимации возврата элемента в миллисекундах. Опция игнорируется если revert установлен как false. 
    helper: "clone",//Опция позволяет использовать подручный элемент для отображения перетаскивания. Доступные значения: 'original', 'clone', функция. 
     start: function(event, ui) {//Данное событие запускается, когда начинается перемещение. 
     	$(ui.helper).addClass('active');//Добавляем класс для перемещаемой части 
     } 
  }); 
  
});

.block { 
  padding: 5px; 
  border: 1px solid #000; 
  margin: 5px; 
  background: #fff; 
  width: 200px; 
} 
.block.active { 
  background: red; 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  
<div class="block"> 
  Блок1 
</div>