Jquery Drag Drop Clone Transform Glitching

时间:2014-01-05 21:03:30

标签: javascript jquery html5 drag-and-drop transformation

克隆的元素应该是可转换的,可拖动的并且可以限制在容器盒中。但现在他们跳到了我不知道问题是什么的地方,控制应该只对活动元素是可见的。

$('.trans').freetrans();

$(function(){    
 //Make every clone image unique.  
   var counts = [0];  
   $(".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]).mousedown(function() {
            $(event.target).freetrans();              
        });
        //this doesn't work...
        //$(".imgSize-"+counts[0]).mousedown(function() {
            //$(event.target).freetrans('controls', false);              
        //});
       }

       }
      });    


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){
        }
    });
}    



   });

小提琴: http://jsfiddle.net/vjeAV/58/

1 个答案:

答案 0 :(得分:0)

它在幕后抛出异常...... jQuery UI 1.8.18。未选中,也应为onLoad

  

Object [object Object]没有方法'draggable'

我也更新了你的代码。我删除了您的绑定,并将其添加到dragstop

$('.draggable').on('dragstop',  function (event, ui) {
  var $temp = $(ui.helper).clone().draggable()
  $(this).after($temp ); 
  $temp.freetrans('controls', true);
});

Fiddle