드롭 이벤트 후 다른 ID를 가진 각 이미지에 다른 클래스 추가

이미지를 완성하기 위해 다른 컨테이너에 놓아야하는 컨테이너에 5 개의 이미지가 있습니다. 이미지가 다른 컨테이너에 떨어지면 해당 ID에 따라 해당 이미지에 다른 클래스를 추가하려고합니다. 이 이미지 조각은이 컨테이너에있는 이전 이미지에 고정됩니다.드롭 이벤트 후 다른 ID를 가진 각 이미지에 다른 클래스 추가

드래그 앤 드롭 이벤트를 구현하고 드롭 이벤트 후 각 이미지에 단일 클래스를 추가 할 수 있습니다. 어떤 변화가 난 내 코드에서 만들 필요가 자사의 ID에 따라 eachimage하는

내 코드의 코드

<style> 

    .add-style { 
    position:absolute; 
    } 
    .north-style { 
    width: 375px;top: 10px;left: 11px; 

    } 
    .south-style { 
    width: 375px;top: 158px;left: 11px; 

    } 
    .east-style { 
    width: 163px;top: 10px;left: 223px;height: 250px; 

    } 
    .west-style { 
     width: 163px;top: 9px;left: 11px;height: 249px; 
    } 
    .center-style { 
     width: 126px;top: 71px;left: 135px; 
    } 
</style> 

<script> 
    $(function() { 

    $("#sortable1").sortable({ 
     connectWith: "div" 
     }); 

    $("#sortable2").sortable({ 
     connectWith: "div", 
     stop: function(event, ui) { 
      ui.item.addClass("add-style") 

     } 
    }); 

    $("#sortable1, #sortable2").disableSelection(); 
    }); 
    </script>

본문

<body> 
    <div class="row-fluid" > 
    <div class="span4"> 
     <div class="span1"></div> 
     <div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11"> 

     <legend>Collect Coupon parts</legend> 
     <span>1st part</span> 
     <img id="north-img" class="ui-state-highlight" src="images/demo/north.png" > 
     <span>2nd part</span> 
     <img id="south-img" class="ui-state-highlight" src="images/demo/south.png" > 
     <span>3rd part</span> 
     <img id="east-img" class="ui-state-highlight" src="images/demo/east.png" > 
     <span">4th part</span> 
     <img id="west-img" class="ui-state-highlight" src="images/demo/west.png" > 
     <span>5th part</span> 
     <img id="center-img" class="ui-state-highlight" src="images/demo/center.png"> 

    </div> 
    </div> 
    <div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8"> 

    <legend>Canvas section</legend> 
    </div> 
    </div> 
    </body>

출처

2014-01-22 Rohit.nib

이 먼저가 클래스를 변경 다른 클래스를 추가합니다 다음과 같은.

표시된 두 가지 예는 다른 3 가지 경우에도 변경됩니다. 코드의이 부분에서 다음

 .north-img-style { 
     width: 375px;top: 10px;left: 11px; 
     } 
    .south-img-style { 
     width: 375px;top: 158px;left: 11px; 
    }

이 두 라인

 stop: function(event, ui) { 

      var theID = ui.item.attr('id'); 
      ui.item.addClass(theID + '-style'); 

    }

var에 theID이 요소의 id을 잡고 추가 한 다음 우리 같은 ID를 가진 단지 addClass하지만 그것에 스타일 추가 . 그래서 이것은 다섯개의 다른 클래스들 모두에게 적용됩니다.

편집

네, 당신은 한 번에 두 개 이상의 클래스를 추가 할 수 있습니다.

  var theID = ui.item.attr('id'); 
      ui.item.addClass(theID + '-style', 'add-style');

출처

2014-01-22 07:31:48 CRABOLO

을하지만 우리는 1 시간에 클래스'.north - IMG-style' 만 추가 스타일 클래스가 추가지고를 추가 할 이미지 두 번째 드롭해야 할 한 가지 문제가있다 : 그냥과 같이 쉼표로 구분합니다. 첫 번째 드롭에 두 클래스를 추가하는 것이 가능하지 않습니까? –

여전히 클래스를 추가하기 위해 두 번 이미지 조각을 놓아야합니다. 나는 1 차 방울에서 ID를 얻고 2 차 방울에서'.addclass() function'을 호출한다고 생각합니다. –

드롭 이벤트 후 다른 ID를 가진 각 이미지에 다른 클래스 추가

답변

관련 문제