0

我正在尝试在容器中制作可移动的图像。我在这里使用 jQuery 插件：http: //threedubmedia.com/。当我单击它们时，我希望它们出现在容器中，但我无法在容器外部更改对象 (.item) 的类。提前致谢！对不起，如果我犯了愚蠢的错误，我只是在学习 javascript。 

<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 ) )
         });   
      });
});
</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"></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>​



<script type="text/javascript">  
function changeclass() {
$('.item').click(function(){ 
   $(this).removeClass('item');
   $(this).addClass('drag'); 
});
}

</script>
4

2 回答 2

0

当你的下面的脚本被渲染 | 检查这个小提琴演示

var $div = $('#container');那个时候你的文件还没有准备好。

在 window.onload 或 $(document).ready 上调用您的脚本

例子

    window.onload = function(){

    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 ) )
             });   
          });
    });


    $('.item').each(function(){ 
    $(this).click(function(){ 
    $(this).removeClass('item');
    $(this).addClass('drag'); 
    });
    }); 
}
于 2013-09-18T05:15:06.050 回答
0

可能的原因可能是，准备块changeClass()：

$(document).ready(function(){
    function changeclass() {
    $('.item').click(function(){ 
       $(this).removeClass('item');
       $(this).addClass('drag'); 
    });
    }
});

如果您只需要在单击事件上更改元素类，请尝试：

$(document).ready(function(){
    $('.item').click(function(){ 
       $(this).removeClass('item');
       $(this).addClass('drag'); 
    });         
});
于 2013-09-18T05:00:40.447 回答