0

私の場合、いくつかのdivタグとimgタグがあります。ドラッグ可能でサイズ変更可能な操作をdiv要素のみに適用しています。

機能の1つに、選択した要素を動的に削除する「要素の削除」機能があります。すべてが機能します。delete関数の呼び出し後、サイズ変更とドラッグが再び機能するように、イベントバインディングを再度実行しています。ドラッグ可能は正常に機能しますが、サイズ変更は機能しません。

resizable（ "destroy"）。resizable（）を呼び出すなど、多くの組み合わせを試しましたが、何も機能しません。domから生成された実行時のhtmlは少し奇妙に見えます。

画像を削除し、dragClassdivがページに存在する場合に問題が発生します。その場合、dragClass divは、サイズ変更可能になるように機能しなくなります。plsはこの問題を修正するためのいくつかのアイデアを提案します。

これがjsFiddleデモリンクです。

次に例を示します。-

  <div id="ParentDIV" style="margin-left:200px; width:800px; height:500px; background:lightgray;">                    
           <div class="dragClass"><p>Drag me around!</p></div>
           <br /><br />
           <img class="dragImgClass" src="logo3.JPG" />
           <br /><br />
           <img class="dragImgClass" src="logo4.JPG" />
       </div>
        <br /><br />
        <input id="Btn4" type="button" onclick="deleteObj();" value="Remove Element" />

js：-

  $(function () {
            BindEvtHandlers();         

        });      //End of DOM Ready

        function BindEvtHandlers() {            
            $(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                              .on("click", selectAction);

            $(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                           .resizable()
                           .on("dblclick", editAction)
                           .on("click", selectAction)
                           .on("blur", "textarea", blurAction); 
           }


        function selectAction() {
            var $this = $(this); //get current obj.                     

            if ($this.get(0).tagName == "IMG")
                $('body').data('CBO', $this.attr('src'));
            else
                $('body').data('CBO', $this.find('p').html());

            $('body').data('selObj', $this);    
            $this.fadeTo('slow', 0.3);             
           }

        function deleteObj() {
            var $selObj = $('body').data('selObj');
            alert($selObj.outerHtml());           

            var cont = $('#ParentDIV').html();
            cont = cont.replace($selObj.outerHtml(), "");
            $('#ParentDIV').html(cont);


            $(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                              .on("click", selectAction);

            $(".dragClass").resizable('destroy');
            $(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false })
                           .resizable()
                           .on("dblclick", editAction)
                           .on("click", selectAction)
                           .on("blur", "textarea", blurAction); 
        }
4

1 に答える 1

0

私はそれに対する簡単な解決策を見つけました。deleteObj fn内で、最初の行の1行後に貼り付け、残りのコードをfnから削除します。

$selObj.remove();

これにより、文字列操作を行うのではなく、DOMツリーから要素が削除されます。

于 2012-06-12T12:03:11.537 に答える