Блог

Главная - Вопросы по программированию - Пользовательский интерфейс jQuery (перетаскиваемый): элемент не помещается в мою позицию курсора после удаления

Пользовательский интерфейс jQuery (перетаскиваемый): элемент не помещается в мою позицию курсора после удаления

#jquery #jquery-ui #jquery-ui-draggable #jquery-ui-droppable

#jquery #jquery-ui #jquery-ui-перетаскиваемый #jquery-пользовательский интерфейс с возможностью удаления

Вопрос:

Я использую пользовательский интерфейс jquery для перетаскивания элементов с клонированием.

После удаления элемента элемент удаляется от моей позиции курсора.

PS: По какой-то причине мне нужно использовать position для моего контейнера с удаляемой областью (#rpWebPushPopupContainer).

  • Если я удалю свойство css position (relative / absolute / fixed) для моего контейнера, оно работает так, как ожидалось.
  • Он не работает в случае использования свойства позиции css.

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

https://jsfiddle.net/bfm091vd/

 draggableInputNo = 0;

var buttonElement = '<div class="button">Button</div>'
var textElement = '<div class="text">Text Element</div>'

$(function() {
  $("#rpWebPushPopupContainer").droppable({
    drop: function(event, ui) {
      $element = ui.helper.clone();
      $element.resizable();
      $element.draggable();
      $element.selectable();

      if (ui.draggable.hasClass('draggableInput text')) {
        draggableInputNo  ;
        $element.attr("id", 'draggableInput'   draggableInputNo);
        $element.appendTo(this);
        $element.append(textElement);
      }
      else if (ui.draggable.hasClass('draggableInput button')) {
        draggableInputNo  ;
        $element.attr("id", 'draggableInput'   draggableInputNo);
        $element.appendTo(this);
        $element.append(buttonElement);
      }
    }
  });

  $(".draggableInput").draggable({
    //containment: '#rpWebPushPopupContainer',
    cursor: 'move',
    helper: draggableInputHelper,
  });

});

function draggableInputHelper(event) {
  return '<div id="draggableInput'   draggableInputNo   '" class="draggableInputHelper resizable" ></div>'
} 
 .draggableInput{width:50px;height:30px;padding:1em;float:left;margin:10px 10px 10px 0;background-color:#93f;border-radius:10px;border:1px solid #93f}
.draggableInputHelper{width:100px;height:30px;padding:.5em;margin:10px 10px 10px 0;background-color:#069;border-radius:10px;border:1px solid #069;color:#fff}
#rpWebPushPopupContainer{position:relative;top:10px;width:500px;height:300px;padding:.5em;margin:10px;float:left;border:1px solid #867979;border-radius:4px;background-color:#ff0} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.min.css" />

<div class="draggableInput text">Text</div>
<div class="draggableInput button">Button</div>

<div id="rpWebPushPopupContainer"></div>

Комментарии:

1. Когда Перетаскиваемый элемент перемещает элемент, он применяет top left к нему стиль и. Когда вы удаляете и добавляете его, этот стиль переносится. Таким образом, стиль заставляет его отображаться относительно родительского элемента.

2. @Twisty , спасибо за разъяснение. Есть ли какая-либо другая альтернатива при сохранении свойства position?

3. Не совсем. Без какого-либо стиля он будет добавлен к 0,0 родительского элемента. Поэтому, если вы хотите, чтобы он приземлился там, где он упал, вы можете использовать Offset вместо Position . Обычно вы в конечном итоге уменьшаете его на основе верхнего левого края родительского элемента.

Метки: