gpt4 book ai didi

jQuery UI (Droppable) : Draggable element not placed at mouse pointer if droppable has css position relative/absolute

转载 作者:行者123 更新时间:2023-12-04 08:25:13 31 4
gpt4 key购买 nike

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

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

If I remove the position for droppable div, it is working as expected.But need to use the position for some obvious reasons


enter image description here

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>

最佳答案

当您可以在 div 内放置时即 relative , 包含在 droppable 中的元素会获得不必要添加到它的父元素的偏移位置。所以删除多余的 offset在 drop 回调函数中。
调整您的位置,如下所示。

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>

关于jQuery UI (Droppable) : Draggable element not placed at mouse pointer if droppable has css position relative/absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65301648/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com