如何使用可拖動的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

您可以bind一個mouseUp事件的元素。

$(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>