在jquery中实现可移动<DIV>

Question

我正在尝试为我的应用程序构建一个动态拖放模块。

它包括一个表，其中包含所有可丢弃的div和一些形状。

因为我不能预先知道某人将在div中放置的形状的类型，并且我必须保存用户选择放置形状的div或div，我需要让应用程序非常动态……

我设法为所有的单元格做了这件事，除了大正方形和长线的顶行和大正方形和宽线的右列。

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type=text/css>
     .draggable { width: 20px; height: 20px; background-color:Blue;}
     .draggable_big { width: 40px; height: 40px; background-color:Blue;}
     .draggable_wide { width: 40px; height: 20px; background-color:Blue;}
     .draggable_long { width: 20px; height: 40px; background-color:Blue;}
     .droppable { width: 20px; height: 20px; background-color:Red;}
 </style>
    <script src="JavaScript/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JavaScript/jquery-ui-1.8.4.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function() {
            $(".draggable").draggable({ snap: '.droppable' });
            $(".draggable_big").draggable({ snap: '.droppable' });
            $(".draggable_wide").draggable({ snap: '.droppable' });
            $(".draggable_long").draggable({ snap: '.droppable' });
            $(".droppable").droppable({
                drop: function() {alert('dropped:' + $(this).attr('id')); }
            });
        });
    </script>
</head>

<body dir="rtl">
    <form id="form1" runat="server">
    <div style="position:absolute; top:0; right:100px">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr id="tr_1" runat="server">
                <td  id="td_1_1" runat="server"><div id="1_1" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td  id="td_1_2" runat="server"><div id="1_2" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td  id="td_1_3" runat="server"><div id="1_3" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td  id="td_1_4" runat="server"><div id="1_4" class="droppable"></div></td> ***not getting responce for draggable_big***
            </tr>
            <tr id="tr_2" runat="server">
                <td id="td_2_1" runat="server"><div id="2_1" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td id="td_2_2" runat="server"><div id="2_2" class="droppable"></div></td>
                <td id="td_2_3" runat="server"><div id="2_3" class="droppable"></div></td>
                <td id="td_2_4" runat="server"><div id="2_4" class="droppable"></div></td>
            </tr>
            <tr id="tr_3" runat="server">
                <td id="td_3_1" runat="server"><div id="3_1" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td id="td_3_2" runat="server"><div id="3_2" class="droppable"></div></td>
                <td id="td_3_3" runat="server"><div id="3_3" class="droppable"></div></td>
                <td id="td_3_4" runat="server"><div id="3_4" class="droppable"></div></td>
            </tr>
            <tr id="tr_4" runat="server">
                <td id="td_4_1" runat="server"><div id="4_1" class="droppable"></div></td> ***not getting responce for draggable_big***
                <td id="td_4_2" runat="server"><div id="4_2" class="droppable"></div></td>
                <td id="td_4_3" runat="server"><div id="4_3" class="droppable"></div></td>
                <td id="td_4_4" runat="server"><div id="4_4" class="droppable"></div></td>
            </tr>
        </table>
    </div>
    <div style="position:absolute; top:0; right:50px">
        <div class="draggable"></div>
        <div class="draggable"></div>
        <div class="draggable"></div>
        <div class="draggable"></div>
        <div class="draggable_big"></div>
        <div class="draggable_wide"></div>
        <div class="draggable_long"></div>
    </div>
    </form>
</body>
</html>

有人知道问题出在哪里吗？

谢谢

Answer 1

通过添加以下内容解决了此问题：

$( ".draggable_big" ).draggable( "option", "cursor", 'move' );
$( ".draggable_big" ).draggable( "option", "cursorAt", {right:15,top:15} );

到每个可拖动的对象..

10倍