php - TABLE TD 中的可放置和可拖动

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));
        }
    });
});​

请获取第一个 div - 绿色，然后将 start 放在 TD a1 上。 console.log 显示<td class=​"ui-droppable">​a1​</td>​ 。这样就可以了。

请获取第二个 div - 红色并在 TD a1 上放置 start。 console.log 显示<td class=​"ui-droppable">​a2​</td>​这不好。应该是<td class=​"ui-droppable">​a1</td>​

请获取第三个 div - 蓝色并在 TD a1 上放置 start；console.log show <td class=​"ui-droppable">​a3​</td>​这不好。应该是<td class=​"ui-droppable">​a1</td>​

如果我在a1上放置开始，我必须如何做才能始终显示a1？

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

Answer 1

我做了 2 处更改:

在 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});
        }
    });

这样，只有顶部的 handle 被放下(而不是高 DIV 的中心)，我们仍然会移动您的彩色 DIV :-)