Question

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


<div class="drag" style="height: 80px; width: 30px; background-color: red"></div>
<div class="drag" style="height: 30px; width: 30px; background-color: green"></div>
<div class="drag" style="height: 120px; width: 30px; background-color: blue"></div>

<table id="droppable" border="1">
    <tr> <td>a1</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td>a2</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td>a3</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td>a4</td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr> <td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

$(function() {
    $( ".drag" ).draggable();
    $( "#droppable td" ).droppable({
        drop: function( event, ui ) {
            console.log($(this));
        }
    });
});

请在TD a1 上获得第一个div - 绿色并放弃开始。 console.log显示<td class="ui-droppable">a1</td>。没关系。

请在TD a1 上获得第二个红色并放弃开始。 console.log show <td class="ui-droppable">a2</td>这很糟糕。应为<td class="ui-droppable">a1</td>

请在TD a1 ; console.log节目中获得第三个div - 蓝色并放弃开始 <td class="ui-droppable">a3</td>这很糟糕。应为<td class="ui-droppable">a1</td>

如果我在 a1 上放弃开始，我必须如何做到这一点 a1 ？

http://jsfiddle.net/RuC8t/1/

Answer 1

我做了两处修改：

在HTML中，我用以下内容替换了div（'start'）的内容：

<span class="dragHandle" style="position: fixed">start</span>

在JS中我替换了你的

$( ".drag" ).draggable();

用这个：

    $( ".dragHandle" ).draggable({
        drag: function ( event, ui) {
            $(this).parent().offset({ top: ui.offset.top, left: ui.offset.left});
        }
    });

这样它只是顶部的手柄掉落（而不是高DIV的中心），我们仍然移动你的彩色DIV： - ）

表TD中的Droppable和Draggable

1 个答案: