드래그 가능한 DIV를 사용하여 클래스를 추가하는 방법

Question

상단 (클릭 또는 드레그)에 테두리를 가져 오려면 드래그 가능한 요소가 있습니다. addClass가 작동하지 않습니다. 나는 아무 이유도 가지고 있지 않다. ... 너의 도움이 필요해, 고마워! jsFiddle : 요소에 jsFiddle

$(document).ready(function() { 
    $('#box1, #box2, #box3, #box4').draggable({ 
    stack: "div", 
    distance: 0 
    }); 

    $('#dragZone div').click(function() { 
    $(this).addClass('border').removeClass('noborder'); 
    $(this).siblings().removeClass('border').addClass('noborder'); 
    }); 
}); 

Answer 1

당신이 할 수있는 bindmouseUp 이벤트입니다.

$(document).ready(function() { 
 

 
    $('#box1,#box2,#box3,#box4').draggable({ 
 
    stack: "div", 
 
    distance: 0 
 
    }).bind('mouseup', function() { 
 
    $(this).addClass('border').removeClass('noborder'); 
 
    $(this).siblings().removeClass('border').addClass('noborder'); 
 
    }); 
 
});

#box1 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 0 
 
} 
 

 
#box2 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 50px; 
 
    z-index: 0 
 
} 
 

 
#box3 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 100px; 
 
    z-index: 0 
 
} 
 

 
#box4 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 200px; 
 
    z-index: 0 
 
} 
 

 
.border { 
 
    border: solid 5px black; 
 
} 
 

 
.noborder { 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 
<div id="dragZone"> 
 
    <div id="box1"></div> 
 
    <div id="box2"></div> 
 
    <div id="box3"></div> 
 
    <div id="box4"></div> 
 
</div>