JQuery множественным перетаскиваемым, один активный на момент

Question

Как я могу сделать что-то вроде этого:

У меня есть несколько Div элементов, которые draggable. Щелчок по одному элементу в то время будет применяться draggable к нему, но я хочу, чтобы иметь возможность удалить draggable, если пользователь щелкает за пределами рабочей области:

Это то, что я до сих пор:

$("#workzone").on('click', '.item', function() { 
    $(this).draggable(); 
}); 

<div id="workzone" style="height:600px"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
</div> 

Вышеуказанные работы мелкие частично.

Теперь мне нужно удалить draggable, если щелкнуть где-нибудь в пределах #workzone элемента, и только один элемент draggable активен в то время.

Answer 1

Следующая JQuery повернет в перетаскиваемом() событие:

$(".item").draggable("disable"); 

Так что, возможно, что-то подобное может решить:

$("#workzone").on('click', '.item', function() { 
    $(this).draggable(); 
    return false; 
}); 

$(document).click(function() { 
    $(".item").draggable("disable"); 
}); 

скрипку здесь: https://jsfiddle.net/mfz43u5n/1/

Edit (на основе на комментарии): Следующий jQuery будет выполнять эту работу:

$(".item").click(function() { 
    $(this).draggable(); 
    $(".item").not(this).each(function(){ 
     $(this).draggable("disable"); 
    }); 
}); 

$(document).click(function(event){ 
    if($(event.target).closest(".item").length > 0) { 
    return false; 
} 
    $(".item").draggable("disable");  
}); 

Fiddle here: https://jsfiddle.net/mfz43u5n/3/