Restrict dragging and dropping elements to specific drop zones

How can I prevent items with a specific identifier from getting dragged and dropped into restricted drop zones?

<div draggable="true" id="type-one">Item 1, Type 1</div>  
<div draggable="true" id="type-one">Item 2, Type 1</div>  

<div draggable="true" id="type-two">Item 1, Type 2</div>
<div draggable="true" id="type-two">Item 2, Type 2</div>

<div id="drop-zone-one">
<!--Only items with id="type-one" are allowed-->
<!--Lock zone and add visual cue when dragging id="type-two"-->
</div>

<div id="drop-zone-two">
<!--Only items with id="type-two" are allowed-->
<!--Lock zone and add visual cue when dragging id="type-one"-->
</div>

By using the browsers Drag and Drop API.

Or reach for a 3rd party plugin.