Question

我想要的是将图像克隆到框架内的各个位置，但我只能得到一个而不是很多，有人可以告诉我我做错了什么，因为我看不到？我正在做一些地形地图，我可以在这里施肥，使用从一个div到另一个div的克隆图像（frame div），对功能有任何疑问，可以问我。 PS：我对所有这些东西都不熟悉。

<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>

Answer 1

而不是像你这样做，我认为你会得到相同的结果。

视图： function myFunction（elmnt，clr）{ elmnt.style.backgroundColor = clr; document.getElementById（“allValues”）。value + = elmnt.id; }

通过这种方式，您将获得所有选定的行，而不是拖放图像，只需绘制选定的div，然后递增到元素，这样，当您提交时，您将获得所有选择的div。

克隆img从一个div到另一个div，但只获得1个克隆

1 个答案: