许多可拖延的拖拽

时间:2011-11-17 13:35:55

标签: jquery-ui jquery drag-and-drop

我正在开发一个具有UI的应用程序,用于映射字段(Source => Destination)。 这些字段将出现在UL中 - > LI - > DIV

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

源字段可以使用revert拖动:true,其中Destination字段(droppable)将接受源字段。我知道接受:“#divsource”

我能够使许多div可拖动,但我的问题是如何将许多LI-> 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 个答案:

没有答案