如何获得可拖动图像的副本 - JQuery [英] How to get a copy of a draggable image - JQuery

问题描述

我正在创建一个工具箱，其中包含一些可拖动的对象。到目前为止，代码工作正常，但是当我拖动一个对象时，它会从工具框中删除。但我想要的是不要从那里删除它。

任何帮助都将受到高度赞赏。代码如下

 < script  >  
 $（document）.ready（function（id）{
 
 
  var  count_dropped_hits =  0 ; 
  var  data = {
   images：[
 {  id：  obj_0，  src： < span class =code-string> background1.png，  width：   500，  height：  400 } 
] 
}; 
 
 
  //  数组删除 
 
 Array.prototype。 remove  = function（ from ，to）{
  var  rest =  this  .slice（（to ||  from ）+  1  ||  this  .length）; 
 此 .length = 来自 <   0 ？ 此 .length + 来自：来自; 
 返回 此 .push.apply（ this ，休息）; 
}; 
 
 
 
  / *  从数据中删除对象* /  
 $（' 。删除'，$（' ＃tools'））。live（'  click'，function（）{
  var  $ this = $（ this ）; 
 
  / *  此旁边的元素是输入存储obj id * /  
  var  objid = $ this.next（）。val（）; 
  / *  从侧边栏中删除对象* /  
 $ this.parent（）。 remove （）; 
  / *  ，来自图片* /  
  var  divwrapper = $（' ＃' + objid）.parent（）。parent（）; 
 $（' ＃' + objid）。除去（）; 
  / *  再次添加到对象列表* /  
  var  image_elem = $ this.parent（）。find（'  img'< /跨度>）; 
  var  thumb_width = image_elem.attr（' 宽度'）; 
  var  thumb_height = image_elem.attr（' 高度）; 
  var  thumb_src = image_elem.attr（'  src'中）; 
 $（' < img />'，{
 id： objid，
 src：thumb_src，
 width：thumb_width，
  //   height： thumb_height， 
 className：'  ui-widget-content' 
}）。appendTo（divwrapper）.resizable（{
 handles：'  se'， 
 stop：resizestop 
}）。parent（' 。ui-wrapper' ）.draggable（{
 revert：'  invalid'，
 helper：<跨越ss =code-string>'  clone' 
}）; 
  / *  并取消注册 - 从对象数据中删除* /  
  var  index = exist_object（objid）; 
 data.images。 remove （index）; 
}）; 
 
 
 
  / *  检查对象是否已经注册* /  
 
函数exist_object（id）{
  for （ var  i =  0 ; i< data.images.length; ++ i）{
  if （data.images [i] .id == id）
  return  i; 
} 
  return  -1; 
} 
 
 
 
  / *  停止时触发调整对象大小* /  
 
函数resizestop（ event ，ui）{
  //  计算并将值更改为obj（宽度和高度） 
  var  $ this = $（ this ）; 
  var  objid = $ this.find（'  .ui-widget-content'）。attr（'  id'）; 
  var  objwidth = ui.size.width; 
  var  objheight = ui.size.height; 
 
  var  index = exist_object（objid）; 
 
  if （index！=  -  1）{ //   if exists（它应该！）更新宽度和高度 
 data.images [index] .width = objwidth; 
 data.images [index] .height = objheight; 
} 
} 
 
 
  / *  对象是可调整大小和可拖动* /  
 
 $（' ＃objects img'）。resizable（{
  / *  仅对角线（东南）* /  
句柄：'  se'，
 stop：resizestop，
} ）.parent（'  .ui-wrapper'）。draggable（{
 revert：< span class =code-string>'  invalid'，
 helper：'  clone' 
}）; 
 
 
 
 
 $（'  #background' ）。droppable（{
 accept：' ＃objects div'，< span class =code-comment> //  仅接受来自#objects的可拖动 
 drop：function（事件，ui）{
 
  //  对当前的引用元素 
  var  $ this = $（ this ）; 
 ++ count_dropped_hits; 
 
  var  draggable_elem = ui.draggable.clone（）; 
 draggable_elem.css（'  z-index'，count_dropped_hits）; 
 
  / *  对象被删除：注册* /  
  var  objsrc = draggable_elem.find（' 。ui-widget-content').attr('  src'）; 
 
  //  获取宽度和高度为十进制数 
 < span class =code-keyword> var  objwidth = parseFloat（draggable_elem.css（'  width'）， 10 ）; 
  var  objheight = parseFloat（draggable_elem.css（'  height'）， 10 ）; 
 
  / *  对于top和left，我们减少了droppable元素的顶部和左边* /  
  var  objtop = ui.offset.top  -  $ this.offset（）。top; 
  var  objleft = ui.offset.left  -  $ this.offset（）。left; 
 
  var  objid = draggable_elem.find（'  .ui-widget-content'）。attr（'  id' ）; 
 
  var  index = exist_object（objid）; 
 
  if （index！=  -  1）{ //  如果存在更新顶部和左侧 
 data.images [index] .top = objtop; 
 data.images [index] .left = objleft; 
} 
 其他 {
  / *  注册新的* /  
  var  newObject = {
  '  id'：objid，
 '  src'：objsrc，
 '  width'：objwidth， 
 '  height'：objheight，
 '  top'：objtop，
 ' 左 ：objleft，
 '  rotation'：'  0' 
 
}; 
 data.images.push（newObject）; 
  / *  将对象添加到侧边栏* /  
 
 $（ ' < div />'，{
 className：'  item' 
}）。append（
 $（ ' < div />'，{
 className：' < span class =code-string> thumb'，
 html：' < img width =50class =ui-widget-contentsrc =' + objsrc + '  >< / img>' 
}）
）.append（
 $（' < div />'，{
 className：'  slider'，
 html：' < span class =code-string>< span>旋转< / span>< span class =degrees> 0< / span>' 
}）
）。追加（
 $（' < a />'，{
 className：'  remove' 
}）
）.append（
 $（' < input />'，{
类型： '  hidden'，
  value ：objid  //  跟踪关联的对象 
}）
 ）.appendTo（$（' ＃tools'））; 
 $（' 。slider'）。slider（{
 orientation：< span class =code-string>'  horizo​​ntal'，
 max： 180 ，
 min：-180，
  value ： 0 ，
 slide：function（ event ，ui）{
  var  $ this = $（< span class =code-keyword> this ）; 
  / *  更改轮换和停止时在数据对象中注册该值* /  
 draggable_elem.css（{''   -  moz-transform'：'  rotate（'  + ui.value + '  deg）'，'   -  webkit-transform'：'  rotate（' + ui.value + '  deg）'}）; 
 $（' 。degrees'，$ this）.html（ui。值）; 
}，
 stop：function（ event ，ui）{
 newObject.rotation = ui。值; 
} 
}）; 
} 
} 
}）; 
 
 
  / *  用户按下载按钮* /  
 
 $（' ＃submit'）。bind（'  click'，function（）{
  var  dataString = JSON.stringify（data）; 
 $（'  #jsondata'）。val （dataString）; 
 $（'  #jsonform'）。submit（）; 
}）; 
}）; 
 < /   script  >  

解决方案

（document）.ready（function（id）{


< span class =code-keyword> var count_dropped_hits = 0 ;
var data = {
images：[
{ id： obj_0， src： background1.png， width： 500， height： 400}
]
};


// 数组删除

Array.prototype。 remove = function（ from ，to）{
var rest = this .slice（（to || from ）+ 1 || this .length）;
此 .length = 来自 < 0 ？ 此 .length + 来自：来自;
返回 此 .push.apply（ this ，休息）;
};



/ * 从数据中删除对象* /

（' 。删除'，

（' ＃tools'））。live（' click'，function（）{
var

I am creating a tool box which have some objects which are draggable. So far the code works fine but when i drag an object, it removes from the tool box. But what i want is to not to remove it from there.
Any help would be highly appreciated. And the code is as follows

<script>
        $(document).ready(function(id) {


            var count_dropped_hits = 0;
            var data = {
                "images": [
                    {"id" : "obj_0" ,"src" : "background1.png"  ,"width" : "500", "height" : "400"}
                ]
            };


            // Array Remove

            Array.prototype.remove = function(from, to) {
              var rest = this.slice((to || from) + 1 || this.length);
              this.length = from < 0 ? this.length + from : from;
              return this.push.apply(this, rest);
            };



            /*  remove an object from data */
            $('.remove',$('#tools')).live('click',function(){
                var $this = $(this);

                /* the element next to this is the input that stores the obj id */
                var objid = $this.next().val();
                /* remove the object from the sidebar */
                $this.parent().remove();
                /* ,from the picture */
                var divwrapper = $('#'+objid).parent().parent();
                $('#'+objid).remove();
                /* add again to the objects list */
                var image_elem      = $this.parent().find('img');
                var thumb_width     = image_elem.attr('width');
                var thumb_height    = image_elem.attr('height');
                var thumb_src       = image_elem.attr('src');
                $('<img />',{
                    id          :   objid,
                    src         :   thumb_src,
                    width       :   thumb_width,
                    //height        :   thumb_height,
                    className   :   'ui-widget-content'
                }).appendTo(divwrapper).resizable({
                    handles : 'se',
                    stop    : resizestop
                }).parent('.ui-wrapper').draggable({
                    revert: 'invalid',
                    helper:'clone'
                });
                /* and unregister it - delete from object data */
                var index = exist_object(objid);
                data.images.remove(index);
            });



            /*  checks if an object was already registered */

            function exist_object(id){
                for(var i = 0;i<data.images.length;++i){
                    if(data.images[i].id == id)
                        return i;
                }
                return -1;
            }



            /* triggered when stop resizing an object */

            function resizestop(event, ui) {
                //calculate and change values to obj (width and height)
                var $this       = $(this);
                var objid       = $this.find('.ui-widget-content').attr('id');
                var objwidth    = ui.size.width;
                var objheight   = ui.size.height;

                var index       = exist_object(objid);

                if(index!=-1) { //if exists (it should!) update width and height
                    data.images[index].width    = objwidth;
                    data.images[index].height   = objheight;
                }
            }


            /* objects are resizable and draggable */

            $('#objects img').resizable({
                /* only diagonal (south east)*/
                handles : 'se',
                stop    : resizestop,
            }).parent('.ui-wrapper').draggable({
                revert  : 'invalid',
                helper  : 'clone'
            });




            $('#background').droppable({
                accept  : '#objects div', // accept only draggables from #objects
                drop    : function(event, ui) {

                    //reference to the current element
                    var $this       = $(this);
                    ++count_dropped_hits;

                    var draggable_elem = ui.draggable.clone();
                    draggable_elem.css('z-index',count_dropped_hits);

                    /* object was dropped : register it */
                    var objsrc      = draggable_elem.find('.ui-widget-content').attr('src');

                    //get width and height as decimal numbers
                    var objwidth    = parseFloat(draggable_elem.css('width'),10);
                    var objheight   = parseFloat(draggable_elem.css('height'),10);

                    /* for top and left we decrease the top and left of the droppable element */
                    var objtop      = ui.offset.top - $this.offset().top;
                    var objleft     = ui.offset.left - $this.offset().left;

                    var objid       = draggable_elem.find('.ui-widget-content').attr('id');

                    var index       = exist_object(objid);

                    if(index!=-1) { //if exists update top and left
                        data.images[index].top  = objtop;
                        data.images[index].left = objleft;
                    }
                    else{
                        /* register new one */
                        var newObject = {
                            'id'        : objid,
                            'src'       : objsrc,
                            'width'     : objwidth,
                            'height'    : objheight,
                            'top'       : objtop,
                            'left'      : objleft,
                            'rotation'  : '0'

                        };
                        data.images.push(newObject);
                        /* add object to sidebar*/

                        $('<div/>',{
                            className   :   'item'
                        }).append(
                            $('<div/>',{
                                className   :   'thumb',
                                html        :   '<img width="50" class="ui-widget-content" src="'+objsrc+'"></img>'
                            })
                        ).append(
                            $('<div/>',{
                                className   :   'slider',
                                html        :   '<span>Rotate</span><span class="degrees">0</span>'
                            })
                        ).append(
                            $('<a/>',{
                                className   :   'remove'
                            })
                        ).append(
                            $('<input/>',{
                                type        :   'hidden',
                                value       :   objid       // keeps track of which object is associated
                            })
                        ).appendTo($('#tools'));
                        $('.slider').slider({
                            orientation : 'horizontal',
                            max         : 180,
                            min         : -180,
                            value       : 0,
                            slide       : function(event, ui) {
                                var $this = $(this);
                                /* Change the rotation and register that value in data object when it stops */
                                draggable_elem.css({'-moz-transform':'rotate('+ui.value+'deg)','-webkit-transform':'rotate('+ui.value+'deg)'});
                                $('.degrees',$this).html(ui.value);
                            },
                            stop        : function(event, ui) {
                                newObject.rotation = ui.value;
                            }
                        });
                    }
                }
            });


            /* User presses the download button */

            $('#submit').bind('click',function(){
                var dataString  = JSON.stringify(data);
                $('#jsondata').val(dataString);
                $('#jsonform').submit();
            });
        });
    </script>

解决方案

(document).ready(function(id) { var count_dropped_hits = 0; var data = { "images": [ {"id" : "obj_0" ,"src" : "background1.png" ,"width" : "500", "height" : "400"} ] }; // Array Remove Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; /* remove an object from data */

('.remove',

('#tools')).live('click',function(){ var

这篇关于如何获得可拖动图像的副本 - JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！