gpt4 book ai didi

javascript - 无法在 mouseup 事件中删除元素

转载 作者:数据小太阳 更新时间:2023-10-29 04:17:12 24 4
gpt4 key购买 nike

这是我编写的用于一次拖动多个项目的 jQuery 代码。它现在可以拖动但不能放下。

这是代码

    $(document).on('click', function (e) {
var target = e.target;
if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
});
$(document).delegate('.a', 'dblclick', function (e) {
$(this).addClass('selected');
});

$(document).delegate('.selected', 'mousedown', function (e) {
var div = $('<div></div>');
$('.selected').each(function () {
div.append($(this).clone());
});
div.prop('id', 'currentDrag');
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
$('body').append(div);
});

$(document).on('mouseup', function (e) {
var tgt = e.target;
var mPos = {
x: e.pageX,
y: e.pageY
};
$('.drop').each(function () {
var pos = $(this).offset(),
twt = $(this).width(),
tht = $(this).height();
});
if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
$(this).append($('#currentDrag').html());
}
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});
$('.drop').on('mouseup', function (e) {
$(tgt).append($('#currentDrag').html());
$('.drop .selected').removeClass('selected');
$('#currentDrag').remove();
});

$(document).on('mousemove', function (e) {
$('#currentDrag').css({
left: e.pageX + "px",
top: e.pageY + "px"
});
});

我的代码有什么问题,我该如何解决。这是 fiddle http://jsfiddle.net/mDewr/27/

最佳答案

我真的建议尝试找到一种方法让 jQuery UI draggabledroppable 库为您工作。那么问题就变成了,类似于这个:How do I drag multiple elements with JavaScript or jQuery?

以下是我们如何将该问题的答案之一应用于您的问题。我正在使用 jQuery UI multiple draggable plugin ,其完整脚本可在此处找到:jquery.ui.multidraggable-1.8.8.js

首先让我们简化您的 HTML。通过将可拖放的 div 放入元素中,我们不必为每个元素应用冗余样式。相反,我们可以使用包含元素来设置样式

HTML

<div id="parent">
<div id="dragTargets">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
<div id='dropTargets'>
<div></div>
<div></div>
</div>
</div>

使用该插件,我们可以在每个拖动 div 上调用 multidraggable。并且 droppable 可以放在任何地方

JavaScript

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

自定义

我们可以通过样式来控制外观。例如,我们会将任何可以接收掉落物的东西设为黄色,将要掉落的任何东西设为红色,将任何接收到元素的东西设为绿色

下面是 CSS 中的一些样式示例

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

我们将控制何时使用 JavaScript 应用这些类:

$("#dropTargets div").droppable({
activeClass: "ui-state-active",
hoverClass: "ui-state-hover",
drop: function () {
$(this).addClass("ui-state-highlight")
}
});

可多次拖动

您应该为当前选定的元素设置样式。该脚本会将 ui-multidraggable 类应用于所有当前选定的元素。以下 CSS 将使用户明白他们的选择已被选中。

.ui-multidraggable {
background: tan;
}

查看此演示。只需按住 ctrl 即可选择多个 div,然后一次拖动所有这些。

jsFiddle

关于javascript - 无法在 mouseup 事件中删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18798974/

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