当前位置： 文江博客话题详情

在 jquery 中实现可移动的

发布于 2024-09-15 03:34:06 字数 4698 浏览 3 评论 0原文

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

它包括一个表格，其中包含所有可放置的 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>

任何人都知道问题是什么？

谢谢

原文

I am trying to build a dynamic drag&drop module for my App.

It includes a table that holds all the droppable divs and few shapes.

As i can't know from advance the type of shape someone will put in a div and i have to save the div or divs which the user chose to drop the shape in i need to allow the app to be very dynamic...

I managed to do it for all the celld except from the top row for the big square and the long line and the right column for the big square and for a wide line....

The code:

<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>

Any one have any idea what is the problem?

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

酒废 2024-09-22 03:34:06

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

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

到每个可拖动对象..

10x

solved the problem by adding:

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

to every draggable object..

10x

回复 原文
~没有更多了~

关于作者

坐在坟头思考人生

暂无简介

0 文章
0 评论
843 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文