0

要素がコンテナ内で移動可能で、コンテナに追加してクリックで移動し、ダブルクリックで削除できるスクリプトを作成しようとしています。変更クラスが .item から .drag に機能するようになりましたが、新しいクラスを想定すると、ドラッグしません。ここから jQuery プラグインを使用しています: http://threedubmedia.com/。それを動かしたり、ダブルクリック機能のどこにどのように配置したりするかについての助けは素晴らしいでしょう! 前もって感謝します！！

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="./js/jquery.event.drag-2.2.js" ></script>
<script src="./js/jquery.event.drag.live-2.2.js" ></script>
<script type="text/javascript">
jQuery(function($){
   var $div = $('#container');
   $('.drag')
      .drag("start",function( ev, dd ){
         dd.limit = $div.offset();
         dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
         dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
      })
      .drag(function( ev, dd ){
         $( this ).css({
            top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
            left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
         });   
      });
});
$(document).ready(function(){
    $('.item').click(function(){ 
       $(this).removeClass('item');
       $(this).addClass('drag'); 
    });         
});
</script>




<div id="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>
<div class="item" style="left:280px;"></div>





<style type="text/css">
.drag {
   position: absolute;
   border: 1px solid #89B;
   background: #BCE;
   height: 58px;
   width: 58px;
   cursor: move;
   top: 120px;
   }
#container {
   height: 299px;
   border: 1px dashed #888;
   }

.item {
   height: 58px;
   width: 58px;
   background: #000;
}

</style>​
4

1 に答える 1

1

この理由は、クラス .item を持つ div が .drag ではないときに、ドラッグ イベント ハンドラーが適用されているためです。後で変更すると、イベント ハンドラは自動的に適用されません。

最善の策は、ドラッグ イベントを適用するために別のセレクターを使用することです。たぶん、「.drag」の代わりに「#container div」を使用してください

使用しているドラッグ可能なプラグインが jQuery on() http://api.jquery.com/on/をサポートしているかどうかも確認できます。

于 2013-09-18T20:43:19.270 に答える