jQuery UI (Droppable)：如果 droppable 具有相对/绝对的 css 位置，则可拖动元素不会放置在鼠标指针处

Posted 2023-05-08

【中文标题】jQuery UI (Droppable)：如果 droppable 具有相对/绝对的 css 位置，则可拖动元素不会放置在鼠标指针处

【英文标题】：jQuery UI (Droppable) : Draggable element not placed at mouse pointer if droppable has css position relative / absolute

【发布时间】：2021-03-25 20:06:53

【问题描述】：

我正在使用 jquery ui 拖放。

如果可放置的 div (#dropContainer) 的 css 位置为相对/绝对/固定，则放置的元素不会放在我的鼠标指针上。

<div id="dropContainer" style="position:relative;"></div>

如果我删除可放置 div 的位置，它会按预期工作。 但是由于一些明显的原因需要使用位置

draggableInputNo = 0;

var buttonElement = '<div class="button" style="width:200px;">Button</div>'
var textElement = '<div class="text">Text Element</div>'

$(function() 
  $("#dropContainer").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: #9933ff;
  border-radius: 10px;
  border: 1px solid #9933ff;


.draggableInputHelper 
  width: 100px;
  height: 30px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  background-color: #006699;
  border-radius: 10px;
  border: 1px solid #006699;
  color:#ffffff;


#dropContainer 
  width: 300px;
  height: 200px;
  padding: 0.5em;
  margin: 10px;
  float: left;
  border: 1px solid #867979;
  border-radius: 4px;
  background-color: yellow;

<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="dropContainer" style="position:relative;"></div>

【参考方案1】：

当您在div 即relative 中放置元素时，包含在可放置元素中的元素会不必要地添加父元素的偏移位置。所以在 drop 回调函数中去掉多余的offset。

如下调整你的位置。

var parent = $('#dropContainer.ui-droppable');
var leftAdjust = $element.position().left - parent.offset().left;
var topAdjust = $element.position().top - parent.offset().top;
$element.css(
      left: leftAdjust,
      top: topAdjust
      )

draggableInputNo = 0;

var buttonElement = '<div class="button" style="width:200px;">Button</div>'
var textElement = '<div class="text">Text Element</div>'

$(function() 
  $("#dropContainer").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);
        var parent = $('#dropContainer.ui-droppable');
        var leftAdjust = $element.position().left - parent.offset().left;
        var topAdjust = $element.position().top - parent.offset().top;
        $element.css(
          left: leftAdjust,
          top: topAdjust
        );
       else if (ui.draggable.hasClass('draggableInput button')) 
        draggableInputNo++;
        $element.attr("id", 'draggableInput' + draggableInputNo);
        $element.appendTo(this);
        $element.append(buttonElement);
        var parent = $('#dropContainer.ui-droppable');
        var leftAdjust = $element.position().left - parent.offset().left;
        var topAdjust = $element.position().top - parent.offset().top;
        $element.css(
          left: leftAdjust,
          top: topAdjust
        );
      
    
  );

  $(".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: #9933ff;
  border-radius: 10px;
  border: 1px solid #9933ff;


.draggableInputHelper 
  width: 100px;
  height: 30px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  background-color: #006699;
  border-radius: 10px;
  border: 1px solid #006699;
  color: #ffffff;


#dropContainer 
  width: 300px;
  height: 200px;
  padding: 0.5em;
  margin: 10px;
  float: left;
  border: 1px solid #867979;
  border-radius: 4px;
  background-color: yellow;

<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="dropContainer" style="position:relative;"></div>

【讨论】：

@Shree，太好了……这正是我想要的。 非常感谢 TON。我接受并支持您的回答。感谢您的快速解决方案。 像魅力一样工作...再次感谢您挽救了我的一天

很高兴为您提供帮助:)

【参考方案2】：

这是另一个例子，基于你上面已经得到的答案。

$(function() 
  function draggableInputHelper(event) 
    return $("<div>", 
      id: "draggableInput" + draggableInputNo,
      class: "draggableInputHelper resizable"
    );
  

  function correctDrop(ui, par) 
    return 
      top: (ui.position.top - $(par).offset().top) + "px",
      left: (ui.position.left - $(par).offset().left) + "px"
    
  

  var draggableInputNo = 0;

  var buttonElement = $("<div>", 
      class: "button"
    )
    .css("width", "200px")
    .html("Button");
  var textElement = $("<div>", 
    class: "text"
  ).html("Text Element");

  $("#dropContainer").droppable(
    drop: function(event, ui) 
      $element = ui.helper.clone();
      $element.attr("id", 'draggableInput' + ++draggableInputNo);
      $element.css(correctDrop(ui, $("#dropContainer"))).appendTo(this);
      if (ui.draggable.hasClass('draggableInput text')) 
        $element.append(textElement);
       else if (ui.draggable.hasClass('draggableInput button')) 
        $element.append(buttonElement);
      
      $element.resizable();
      $element.draggable();
      $element.selectable();
    
  );

  $(".draggableInput").draggable(
    cursor: 'move',
    helper: draggableInputHelper,
  );
);

.draggableInput 
  width: 50px;
  height: 30px;
  padding: 1em;
  float: left;
  margin: 10px 10px 10px 0;
  background-color: #9933ff;
  border-radius: 10px;
  border: 1px solid #9933ff;


.draggableInputHelper 
  width: 100px;
  height: 30px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  background-color: #006699;
  border-radius: 10px;
  border: 1px solid #006699;
  color: #ffffff;


#dropContainer 
  width: 300px;
  height: 200px;
  padding: 0.5em;
  margin: 10px;
  float: left;
  border: 1px solid #867979;
  border-radius: 4px;
  background-color: yellow;

<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="dropContainer" style="position:relative;"></div>

这只是压缩了一些代码。制作小函数可以更轻松地应用一些所需的更改。