JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div id="el1" class="draggable">
    <p>Взяться за элемент можно только здесь</p>
  </div>
  <div id="el2" class="draggable">
    <p>А тут наоборот - везде кроме этой области</p>
  </div>

CSS

body{font:9pt Arial,sans-serif}
    p{font-size:9pt; color:#888; margin:8px 0 12px 0;padding:2px 4px; background-color:#eee6a3;
      border:1px solid #c9c396;}
    .draggable{float:left; width:135px; height:90px; padding:0 3px; margin-right:10px;
      border:1px solid #ddd; background-color:#eee;}

JavaScript

$("#el1").draggable({ handle: "p" });
    $("#el2").draggable({drag:function(event, ui){
  console.log(ui.position.left + ui.position.top);
}, cancel: "p",containment:"window", scroll:false });