Question

我有一个可拖动的PNG图标列表，可以将其拖放到包含它们的div上方的区域。当点击标签按钮时，包含div的{{1}}会向下滑动以最小化。

当我从底部容器中拖出图像时，将其放在上面的页面上然后单击以最小化底部容器，放下的图像也会向下动画。它保持附在原始列表中。

如何删除主要列表中的拖动项目，同时仍允许使用拖动重新定位它们（如果不需要，可能会重新放回底部容器中）？

我在容器/托盘中的列表结构：

.animate

这是我的Javascript部分

    <div class="BottomToolsTray">
    <div class="IconsTrayTab">
    <div>
    <a href="#"><img src="images/contract_btn.png" class="OpenIconsBtn" data-toggleon="images/contract_btn.png" data-toggleoff="images/expand_btn.png" border="0" /></a>
    </div>
    <div class="IconsTrayLabel">
    Icons Tray
    </div>
    </div>
    <div class="TextLabelsTab">
    Text Labels
    </div>
    <div class="ArrowsTab">
    Arrows
    </div>
    <div class="IconsPanelBox">
    </div>
</div>

<div class="IconGraphics">
     <ul class="clear">
    <li class="item" data-id="1">
                <a href="#">
                    <img src="images/Complex.png" alt="Complex">
                </a>
            </li>
            <li data-id="2">
                <a href="#">
                    <img src="images/Simple.png" alt="Simple">
                </a>
            </li>

            <li data-id="3">
                <a href="#">
                    <img src="images/2_3rd_IT_spend.png" alt="">
                </a>
            </li>
     </ul>
</div>

这是我的JSFiddle。

这是一个更新...... 现在让它在IE 9中工作，除了当我希望它们放下它们被丢弃的地方时，被丢弃的对象向左上方捕捉。 lerger问题是，一旦切换到使用帮助程序和克隆，删除的对象的重新定位已停止在iPad上工作。有人可以提供帮助解决这个问题吗？我不确定这是否是触碰式冲突，或者我的代码中的问题是iPad不喜欢的。

<script>

    //Instructions Min/Max buttons

    $(document).ready(function(){

    //Icons Tray Min/Max buttons   

        $(".OpenIconsBtn").on('click',function(){
      if($(this).attr('src')==$(this).data('toggleon')){
       $(this).attr('src',$(this).data('toggleoff'))
       $(".BottomToolsTray").animate({"top":"57.3%"},500, function() {
          //$(".IconGraphics").show();
          $(".IconGraphics").fadeIn(100);
        });


       //SLIDE UP TOP BAR WHEN TOOL EXPANDED
       $(".instructions").slideUp(300);
       $(".ToptoggleBtn").attr('src',$(".ToptoggleBtn").data('toggleoff'))


      }else{
       $(this).attr('src',$(this).data('toggleon'))
          $(".IconGraphics").fadeOut(80);
       $(".BottomToolsTray").animate({"top":"579px"},500);
      }
    });
});


    //!-------------------------JQuery DRAG FUNCTION---------------------------------------//

    $(function () {

        // jQuery UI Draggable
        $(".IconGraphics li").draggable({
                      revert:false,
            drag:function () {
                $(this).addClass("active");
                $(this).closest(".IconGraphics").addClass("active");
            },

            // removing the CSS classes once dragging is over.
            stop:function (event, ui) {
                               $(this).removeClass("active").closest(".IconGraphics").removeClass("active");
            }
        });
                    $(".PageArea").droppable({
            tolerance:"touch",
            drop:function (event,ui) {
                var draggable = ui.draggable;
                var id = draggable.attr("data-id");
            }
        });
    });
</script>

JQuery拖动项目并从动画列表面板中删除

0 个答案: