如何使用clone和rezise在draggable中插入Rotation

时间:2016-01-01 18:13:59

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

我正在尝试部署div draggable的旋转选项:

http://jsfiddle.net/avPf6/1/

代码:

$(function(){  
 //Make every clone image unique.  
   var counts = [0];
    var resizeOpts = { 
      handles: "all" ,autoHide:true
    };    
   $(".dragImg").draggable({
                         helper: "clone",
                         //Create counter
                         start: function() { counts[0]++; }
                        });

$("#dropHere").droppable({
       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.
         $("#dropHere .dragImg").addClass("item-"+counts[0]);
            $("#dropHere .img").addClass("imgSize-"+counts[0]);

   //Remove the current class (ui-draggable and dragImg)
         $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});     
    make_draggable($(".item-"+counts[0])); 
      $(".imgSize-"+counts[0]).resizable(resizeOpts);     
       }

       }
      });


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


  var ele = $('.dragImg');

        $('<div></div>').appendTo(ele).attr('id','handle').css({
            'position': 'absolute',
            'bottom': 5,
            'right': 5,
            'height': 10,
            'width': 10,
            'margin': -20,
            'background-color': 'orange'
        });

        ele.css('position', 'relative');

        $('#handle').draggable({
            handle: '#handle',
            opacity: 0.01, 
            helper: 'clone',
            drag: function(event, ui){
                var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

                $(this).parent().css({
                    '-moz-transform': rotateCSS,
                    '-webkit-transform': rotateCSS
                });
            }
        });


   });

我要做的是在div中插入一个旋转点 我没有得到:

http://jsfiddle.net/wJUHF/255/

感谢您的帮助

0 个答案:

没有答案