个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
基本上我拥有的是一组doodads，我需要做的是能够将该组中的任何项目拖到一个收容箱中。一旦进入盒子，它们仍然可以自由移动和操作，但不能再次从盒子中取出，尽管它们可以被删除。
装饰物也被设置为克隆，因为用户可以根据需要在盒子中拥有多个元素。
所以两部分就是，设置doodad列表(已经完成)，然后让它可以拖拽，这样就可以拖拽到droppable div框中。然后第二部分是，一旦它在div框中，它必须再次可拖动，不可复制，并且还包含在框中。
这是我的 JS 代码:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
我已经尝试了很多东西。我尝试将元素的 ID 更改为其他内容，以便它可以采用该类的可拖动属性。我也尝试过在 drop 函数中对其进行编程，但我遇到了问题。
我不知道如何引用刚刚放下的可拖动元素以对其进行操作。有人告诉我它是 $(ui.draggable) 或 $(ui.draggable).clone()，但是当我尝试引用它并对其调用 draggable 时使用我想要的选项，它不起作用。我得到的最好的结果是它在放下后可以拖动，但它会不断复制自己并且不包含在框内。
任何帮助将不胜感激，我对所有这些东西都是新手。我确实看过 JQuery API，但它在这方面对我帮助不大。
编辑:
我的 HTML 是:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS 是:
.box {
width:500px;
height:500px;
background: orange;
}
最佳答案
您可以在放置的元素上设置一个类，例如copied 然后检查删除的元素是否已经有那个类，如果有就停止克隆。
要限制框内的移动，您可以使用 containment可拖动选项:
Constrains dragging to within the bounds of the specified element or region.
代码:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
演示:http://jsfiddle.net/IrvinDominin/ufHMm/
要获得放置元素的位置，我们必须计算并使用它，使用:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
我们沿着它的容器获得辅助位置。
最终代码:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
关于javascript - 拖放后约束可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18674299/
25
4
0
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡，但当我将卡拖到底部时，卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素，所有
我目前正在构建一个多个处理的 slider 小部件，并且目前正在实现手势检测器。我有一个问题，如果您用第二根手指触摸/拖动屏幕，检测器会识别它并调用 onDragUpdate 函数，这是我试图禁用的功
我是 AngularJS 的新手，我对当前的项目有点压力，这就是我在这里问的原因。 我看到 AngularJS 有 ng-dragstart 事件( http://docs.ng.dart.ant.c
关于缩放大图像和平移有什么建议吗？最好内联在页面上。 我一直在使用PanoJS(又名GSV2)，但是现在越来越多的人使用iPhone/iPad/Android类型的设备，这个库要么太慢，要么旧版本不支
我在尝试拖动 JPanel 时遇到问题。如果我纯粹在 MouseDragged 中将其实现为: public void mouseDragged(MouseEvent me) { me.getS
我有一个需要与屏幕底部对齐的 ImageButton，当我单击并拖动它时，它会随着我的手指移动一定距离，超过该距离它不会远离原点，而是继续跟随我的手指从原点开始的方向。 当我松手时，按钮必须滑回原点。
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我需要一个解决方案来实现拖动和缩放，在不使用矩阵的情况下围绕屏幕 onTouch 事件路由 ImageView。我搜索了很多但所有答案都是用矩阵完成的，因为我在屏幕矩阵中有多个对象不适合我，我想拖动和
我需要一些帮助来拖动 UIView 以显示主视图下方的菜单 View 。 我有两个 UIView。menuView - 包括菜单按钮和标签 和 mainView - 位于 menuView 之上。 我
谷歌地图即使设为 true 也不可拖动/拖动。 重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
所以我试图模拟鼠标左键单击和鼠标左键释放来执行一些自动拖放操作。 它目前在 C# Winforms(是的，winforms :|)中并且有点笨拙。 基本上，一旦发送了点击，我希望它根据 Kinect
我有一个巨大的 HTML5 Canvas，我希望它像谷歌地图一样工作:用户可以拖动它并始终只看到它的一小部分(屏幕大小)。它只呈现您在屏幕上可以看到的部分。我该怎么做？你有想法吗？ 最佳答案 2 个简
我有以下拖放应用程序代码，它在桌面上按预期工作，但是当我想在移动设备上使用该应用程序时，拖动事件无法按预期工作。我知道触摸事件是必需的，但我不确定如何设置它们和实现这些功能。 .object
我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。 { this.map = map}}
我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何图形，但是随后我希望使用户能够轻松地同时拖动/移动所有选定的功能。 使用ModifyFeature控件一次只能移动一个要素...是否
我有一个 Windows Phone 运行时应用程序，我使用 xaml 在 map 上显示图钉。 当我拖动 map 时，控件试图保持在相同位置时会出现一些滞后。 任何帮助，将不胜感
我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容(over
我确信一定有一种简单的方法可以做到这一点，但到目前为止，我已经花了很长时间在各种兔子洞中没有成功。 我有一个支持拖放的 Collection View 。被拖动的单元格有 UIImageView在 c
如何在两个virtualtreeview之间复制以复制所有列，而不仅仅是第一列？ 复制前： 复制后： 最佳答案 树控件不保存任何数据。它不包含要显示的列数据，因此无法复制它。而是，当树控件想要显示任何
我是一名优秀的程序员,十分优秀！