作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个小型 jquery 可拖放应用程序。您可以在这里看到它:
http://jsfiddle.net/franco13/AwnJA/1/
我需要执行以下操作,并且我对 jquery 中的拖放操作不熟悉,所以感谢您的协助。
我希望:
像这样:
$( init );
function init() {
$('.teamEmblem').draggable({
// containment: $('.teamEmblem').parent(), // this does not work
cursor: 'move',
helper: 'clone',
obstacle: ".teamEmblem", // this does not work
preventCollision: true, // this does not work
revert: true
});
$('.winner').droppable({
hoverClass: 'hovered',
tolerance: 'touch',
drop: handleCardDrop2
});
}
function handleCardDrop2( event, ui ) {
if (true) {
ui.draggable.addClass('correct');
ui.draggable.draggable('disable');
$(this).droppable('disable');
var dragged = ui.draggable.clone(true);
dragged.position({
of: $(this),
my: 'left top',
at: 'left top'
}).css({
position: 'absolute',
display: 'block',
margin: '0 auto'
});
ui.draggable.draggable('option', 'revert', false);
$('body').append(dragged);
}
}
最佳答案
只需对起始代码进行一些小的更改,类似的东西应该可以工作,但我不确定它是否满足您的所有需求:
{我不确定您希望原始元素再次可拖动还是将克隆元素拖动到 box1 中}
function handleCardDrop2(event, ui) {
if (true) {
var $dragged = ui.draggable,
$draggedClone = $dragged.clone(),
$target = $(event.target);
if ($target.is('.box1')) $dragged.addClass('doppedBox1 correct');
else if ($target.is('.box2') && $dragged.is(':not(.doppedBox1)')) return false;
else if ($target.is('.box2')) $dragged.addClass('doppedBox2').draggable('disable');
$(this).droppable('disable');
$draggedClone.position({
of: $(this),
my: 'left top',
at: 'left top'
}).css({
position: 'absolute',
display: 'block',
margin: '0 auto'
});
ui.draggable.draggable('option', 'revert', false);
$('body').append($draggedClone);
}
}
关于jquery - 第一个实例完成后如何在 jquery 中复制可拖放实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16263164/
我是一名优秀的程序员,十分优秀!