Question

我想创建一个简单的＆＃34;让我们建立一个外观＆＃34;工具基本上允许用户将div（内部图像）拖到目标区域，调整大小，旋转或删除它，并对其他几个元素执行相同操作。

我可以为所有元素创建拖动部分，也可以调整一个元素的大小，但不能做多个。

这里有我的内容（我已经部分复制了Stackoverflow中的示例中的代码）：

   $(document).ready(function() {
      //Counter
      counts = [0];

      $(".closeMe").hide();

      $(".dragImg").draggable({
        revert: "invalid",
        containment: "#droppable",
        helper: "clone",
        cursor: "move",
        start: function(event, ui) {
                counts[0]++;
                isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;
        }
      });

      $("#droppable").droppable({
        accept: ".dragImg",
        drop: function(e, ui){
            if(ui.draggable.hasClass("dragImg"))
                 $(this).append($(ui.helper).clone());
            //Pointing to the dragImg class in dropHere and add new class.
            $("#droppable .dragImg").addClass("item-"+counts[0]);
            //Remove the current class (ui-draggable and dragImg)
            $("#droppable .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");       

            $("#droppable .item-"+counts[0]+" .closeMe").addClass("del-"+counts[0]);


            $(".item-"+counts[0]).click(function(){
                $(".item-"+counts[0]+" .closeMe").show();
                //$(".item-"+counts[0]).attr('class', 'ui-draggable-helper');
                $(".item-"+counts[0]+" img").resizable({
                    aspectRatio: true
                });

            });   

            make_draggable($(".item-"+counts[0]));              
        }
      });

      var zIndex = 0;
      function make_draggable(elements){   
            elements.draggable({
                containment:'#droppable',
                start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
                stop:function(e,ui){}
            });
      }

  });

我不能做的是实现调整每个元素的大小，甚至找到一个合适的方式来旋转它们或删除它们。

我想点击选择并显示允许调整大小，旋转和选择的手柄，当点击元素外部时，手柄应该会消失。

我该怎么做？

Answer 1

由于没有提供HTML，因此准确回答这个问题有点困难，但我创建了一个实现这些功能的小样本页面（拖放，删除和调整大小）。删除使用可放置的'trash'div，您可能希望在元素中实现类似于拖动和调整大小的删除功能。

由于jQuery UI本身没有提供旋转功能，所以我把它留下了。有几个插件提供这种功能，因此您应该决定哪种插件最适合您。旋转也适用于CSS3，但您应该记住，这种方法很可能会出现一些浏览器兼容性问题，有关详细信息，请参阅http://caniuse.com/transforms2d。

编辑：添加了一个指向具有此功能的极简主义演示应用程序的链接：https://github.com/relicode/dragdrop-minimalistic/

<!doctype html>

<head>
    <meta charset='utf-8'>
    <title>jQuery draggable / droppable test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <style>

        .drop-hover {
            border: solid green 3px;
        }

        .handle {
            display: none;
        }

        .move-handle {
            cursor: move;
        }

        .rotate-handle {
            cursor: pointer;
        }

        .resize-handle {
            cursor: nwse-resize;
        }

        .trash {
            background-color: silver;
            display: table-cell;
            height: 100px;
            vertical-align: middle;
            width: 100px;
        }

        div.area {
            border: solid black 1px;
            float: left;
            height: 500px;
            width: 300px;
        }

        div.interactable {
            background-color: silver;
            height: 100px;
            position: relative;
            width: 100px;
        }

        div.interactable-tools {
            bottom: 0;
            position: absolute;
            width: 100%;
        }

        p {
            text-align: center;
        }

    </style>
</head>

<body>

    <div id='target-area' class='area'>
        <p>target</p>
        <div class='trash' id='trash'>Trash</div>
    </div>
    <div id='source-area' class='area'>
        <p>source</p>
        <div class='interactable'>
            Draggable 1
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>

        <div class='interactable'>
            Draggable 2
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>

        <div class='interactable'>
            Draggable 3
            <div class='interactable-tools'>
                <span class='handle move-handle'>Mo</span>
                <span class='handle rotate-handle'>Ro</span>
                <!-- <span class='handle resize-handle'>Re</span> -->
            </div>
        </div>
    </div>

    <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {

            var counts = 0; // make sure you use var before your variable name to prevent declaring it as a global variable

            $('.interactable')
                .resizable()
                .draggable({
                    handle: '.move-handle'
                })
                .hover(function() {
                    $(this).find('.handle').toggle();
                }, function() {
                    $(this).find('.handle').toggle();
                });
            ;

            $('#target-area').droppable({
                drop: function(ev) {
                    counts += 1;
                }
            });

            $('#trash').droppable({
                accept: '.interactable',
                drop: function(ev) {
                    $(ev.toElement).parent().parent().remove();
                },
                hoverClass: 'drop-hover'
            });

        });
    </script>

</body>

多个元素拖动，调整大小，旋转和删除

1 个答案: