Javascript - возникли проблемы с changeClass() onClick

Question

Я пытаюсь сделать подвижные изображения внутри контейнера. Я использую плагин 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> 

Answer 1

Возможная причина может быть, готовый блок для 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'); 
    });   
}); 

Answer 2

Когда ниже сценарий оказано | Проверьте эту скрипту Demo

var $div = $('#container'); Ваш документ еще не готов.

Позвоните скрипт на window.onload или $ (документ) .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'); 
    }); 
    }); 
}