2015-05-21 64 views
1

我想要的是克隆圖像到框架內的各個位置,但我只能得到一個而不是很多,有人可以告訴我什麼,米做錯了,因爲我不能看?即時通訊做的地形地圖,我可以施肥的土地,使用克隆圖像從一個div到另一個(frame div),任何有關功能的疑問,都可以問我。 PS:我對這些東西都很陌生。克隆從一個div到另一個div的img,但只獲得1個克隆

<div class="row"> 
      <table> 
       <tbody> 
       <?php 
       for($i = 0, $size = count($farm)-1; $i < $size; $i++) { 
        if($i == 0) 
         echo '<tr>'; 

        if($flag == 1){ 
         echo '</tr>'; 
         echo '<tr>'; 
         $flag = 0; 
        } 
        if($farm[$i]['id_field'] == $farm[$i+1]['id_field']) { 
         echo '<td>'; 
          echo '<div id="'.$farm[$i]['section_name'].'" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:60px; height:60px; border:1px solid #aaaaaa; 
          background:#CCFF99"><center>'.$farm[$i]['section_name'].'</center></div>'; 
         echo '</td>'; 
        }else 
         $flag = 1; 

        if($i == $size - 1) 
         echo '</tr>'; 
       }?> 
       </tbody> 
      </table> 

      <div class="drag"> 
       <img id="treatment" src="<?=base_url()?>/public/img/treat.gif" draggable="true" ondragstart="drag(event)" width="40" height="40" /> 
      </div> 
     </div> 

//----------------------------------------------------------------------- 

<script type="text/javascript"> 
     $(document).ready(function() { 
      //Counter 
      counter = 0; 
      //Make element draggable 
      $(".drag").draggable({ 
       helper: 'clone', 
       containment: 'frame', 
       //When first dragged 
       stop: function (ev, ui) { 
        var pos = $(ui.helper).offset(); 
        objName = "#clonediv" + counter 
        $(objName).css({ 
         "left": pos.left, 
         "top": pos.top 
        }); 
        $(objName).removeClass("drag"); 
        //When an existiung object is dragged 
        $(objName).draggable({ 
         containment: 'parent', 
         stop: function (ev, ui) { 
          var pos = $(ui.helper).offset(); 
          console.log($(this).attr("id")); 
          console.log(pos.left) 
          console.log(pos.top) 
         } 
        }); 
       } 
      }); 
      //Make element droppable 
      $("#frame").droppable({ 
       drop: function (ev, ui) { 
        if (ui.helper.attr('id').search(/drag[0-9]/) != -1) { 
         counter++; 
         var element = $(ui.draggable).clone(); 
         element.addClass("tempclass"); 
         $(this).append(element); 
         $(".tempclass").attr("id", "clonediv" + counter); 
         $("#clonediv" + counter).removeClass("tempclass"); 
         //Get the dynamically item id 
         draggedNumber = ui.helper.attr('id').search(/drag([0-9])/) 
         itemDragged = "dragged" + RegExp.$1 
         console.log(itemDragged) 
         $("#clonediv" + counter).addClass(itemDragged); 
        } 
       } 
      }); 
     }); 
    </script> 

回答

1

,而不是像這樣做,你可以做這樣的,我想你會得到相同的結果。

查看: 功能myFunction(elmnt,clr)elmnt.style.backgroundColor = clr; document.getElementById(「allValues」)。value + = elmnt.id; }

這樣你會得到所有選定行,而不是拖動和刪除的圖像,你只是油漆的選擇DIV和增量元素,這個方式當你提交,您將獲得選擇了所有的div 。