Question

我正在开发一个具有UI的应用程序，用于映射字段（Source =＆gt; Destination）。这些字段将出现在UL中 - ＆gt; LI - ＆gt; DIV

这些列表将由PHP动态创建。

源字段可以使用revert拖动：true，其中Destination字段（droppable）将接受源字段。我知道接受：“＃divsource”

我能够使许多div可拖动，但我的问题是如何将许多LI-＆gt; Div定义为可拖放。

然后，drop事件将调用ajax并且我也可以处理。

我是jQuery的新手，而且到目前为止，我所学到的任务都是我所知道的。但是，我的快速学习能力不是问题。

请帮助我们举一些例子。

感谢 Wikki

下面的代码是我一直在玩的东西。我知道它最终看起来有点远：

<script type="text/javascript">
    $(document).ready(function(){
        $('.srcfield').draggable({
            revert: true,
            helper: "clone" 
        });

        $('#destinationfeilds').droppable({
            accept : ".srcfield",
            over: function(){
                $(this).removeClass('out').addClass('over');
            },
            out: function(){
                $(this).removeClass('over').addClass('out');
            },
            drop: function(ev, ui){
                //var answer = confirm('Delete this item?');
                var theTitle = $(ui.draggable).attr("title");
                $(this).html("<u>"+theTitle+"</u><br/> is mapped!");
                //$(this).removeClass('over').addClass('out');
                //alert(theTitle);
            }
        });
    });
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
    <span>Destination</span>
</div>

<div id="destinationfeilds" class="out">
    <span>Destination</span>
</div>
<div id="sourcefields">
    <div class="srcfield" title="First Name"><span>First Name</span></div>
    <div class="srcfield" title="Last Name"><span>Last Name</span></div>
    <div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>

许多可拖延的拖拽

0 个答案: