Реализация Movable <DIV>в JQuery - PullRequest
       13

Реализация Movable <DIV>в JQuery

0 голосов
/ 20 августа 2010

Я пытаюсь создать динамический модуль перетаскивания для моего приложения.

В него входит таблица, содержащая все выпадающие элементы и несколько фигур.

Как я не знаю заранеетип фигуры, который кто-то поместит в 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>

Кто-нибудь знает, в чем проблема?

Спасибо

1 Ответ

0 голосов
/ 20 августа 2010

решил проблему, добавив:

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

каждому перетаскиваемому объекту ..

10x

...