draggable div의 이미지가 그룹으로 드래그 됨

Question

나는 바보 같은 짓을하고 있고, 조언을 정말 고맙게 생각합니다.

나는 4 개의 이미지가있는 행에 div를 동적으로 생성했으며 각 이미지는 개별적으로 드래그 가능해야합니다.

내가 같은 모양을 만든 DIV 년대 :

는 CSS는 다음과 같습니다

<div id="imageAreaDiv0" class="drag ui-draggable"> 
    <div id="uconConnectedToUserName02" class="drag ui-draggable"> 
     <img class="drag ui-draggable" src="UserThumbs_G-L/a/r/harrytushie" alt="harrytushie" title="harrytushie"> 
    </div> 
    <div id="uconConnectedToUserName03" class="drag ui-draggable"> 
     <img class="drag ui-draggable" src="UserThumbs_G-L/o/e/joeblow" alt="joeblow" title="joeblow"> 
    </div> 
    <div id="uconConnectedToUserName04" class="drag ui-draggable"> 
     <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser000" title="sampleuser000"> 
    </div> 
    <div id="uconConnectedToUserName05" class="drag ui-draggable"> 
     <img class="drag ui-draggable" src="Images/defaultConnectionThumbnail.png" alt="sampleuser001" title="sampleuser001"> 
    </div> 
</div> 

:

$(".target").css({ opacity:"0.5" }); 

    $(".drag").draggable({ 
     zIndex: 3}); 

    $(".target").droppable({ 
     cursor: 'move', 
     drop: function(event, ui) { 
      var message = event.target.id; 
      var connectName = $(ui.draggable).attr('alt'); 
      if(event.shiftKey) { 
       var actionTaken = copyConnection(connectName); 
      } else { 
       var actionTaken = moveConnection(connectName); 
      } 
      document.getElementById('errorNotificationArea').innerHTML = 
       '<span style="color:red;font-size:12px;"><br>Connection '+connectName+' was '+actionTaken+' to category '+message+'<br><br></span>'; 
     } 
    }) 
})(jQuery); 

:

.drag { 
margin-right:5px; 
display: inline-block; 
position: relative; 
cursor: move; 
} 

와 jQuery를 드래그 물건과 같습니다

하지만이 행 (또는 둘 이상의 이미지가있는 행)에서 이미지를 드래그하면 모든 이미지가 그 행은 블록으로 움직입니다. 즉, 모두 한 번에 이동합니다.

"wrapper"div (id = imageAreaDiv0)에서 드래그를 해제하면 이미지가 드래그되지 않습니다.

누군가가 내가 무엇을 잘못하고 있는지 말할 수 있다면 정말 고맙겠습니다.

감사합니다. twistOneUp

Answer 1

DIV에서 drag 클래스를 제거하십시오.

또는 jQuery 함수를 $('img.drag').draggable()으로 다시 작성하십시오.

Answer 2

.drag 클래스의 모든 요소에 draggable()을 호출하려고합니다. 귀하의 컨테이너는 또한 .drag (뿐만 아니라 귀하의 이미지) 클래스입니다. 따라서 컨테이너가 드래그됩니다 (내부의 모든 이미지 포함).