ドラッグ可能な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>