如何在 Jquery 中初始化可拖放对象上的可拖动对象
How can I initialize a draggable on a droppable in Jquery?
我正在用jquery制作益智游戏,并且正在使用可拖动和可拖放。拼图从队列中的 6 个棋子开始,我希望能够将拼图板中的棋子移回队列,但现在我只能将它们移动到棋盘上。我正在努力通过将可拖放部分添加到队列来解决此问题,但我不知道如何在初始化时将可拖放的部分放入可放置队列中。提前感谢!
杰斯菲德尔:http://jsfiddle.net/p8tpn5e6/
下面是队列可丢弃的创建,然后是片段创建。我想在加载时将碎片放入队列中。
function init() {
// Create Queue
for ( var i=0; i<6; i++ ) {
$('<div>' + 'q' + [i] + '</div>').attr( 'id', 'queue'+numbers[i] ).appendTo( '#queuePile' ).droppable( {
accept: '#tilePile div',
hoverClass: 'hovered',
drop: handleTileDrop,
} );
}
// Create the pile of tiles
for ( var i=0; i<6; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#tilePile' ).draggable( {
containment: '#content',
stack: '#tilePile div',
cursor: 'move',
revert: 'invalid'
} );
}
所以我找到了一种使用 css 的方法。我刚刚在同一位置初始化了可放置队列和可拖动部分。然后通过设置它的 css z-index = 1 来设置顶部的可拖动对象。
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 拖放无法识别动画CC中拖动对象的子对象
- 原生HTML5拖放:使可拖动对象不可拖放
- 如何使用jQuery或JavaScript在基于SVG的对象上创建拖放
- 如何在 Jquery 中初始化可拖放对象上的可拖动对象
- 正在尝试使用JQuery更改拖放对象的img src
- 如何使用interaction .js拖放和克隆对象
- 将拖放目标附加到拖放对象上
- jQuery拖放-检查可拖放对象之外的拖放
- Rails拖放更改对象属性
- 检查可拖放对象是否在正确的可拖放容器中
- 隐藏在可拖放对象后面的可拖放对象
- 从父框架中拖动一个项目,并将其放入子框架中的可拖放对象中
- 使用Jquery根据可拖放对象的ID动态更改图像的src
- 在使用.css移动一个对象后,重置所有可放物品以允许可拖放物品
- 用于在浏览器中转换对象(拖动、缩放、旋转和扭曲)的Javascript框架