Не переносится элемент

195

14 января 2019, 20:40

Подскажите пожалуйста, есть страница на которой можно перенести <p> но нельзя перемещать <button>. Подскажите пожалуйста, почему. Спасибо.

$(function() { 
 
  $('.dragElement').draggable({ 
    containment: "parent" 
  }).filter('#dragH').draggable("option", "axis", "x"); 
 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>jQuery UI</title> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> 
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"> 
  <style type="text/css"> 
    #container { 
      border: medium double black; 
      width: 700px; 
      height: 450px 
    } 
  </style> 
</head> 
 
<body> 
  <div id="container"> 
    <p class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;"> 
      Перетащить внутри родителя 
    </p> 
    <p class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;"> 
      Перетащить внутри родителя2 
    </p> 
    <button class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;">Кнопка</button> 
  </div> 
</body> 
 
</html>

Answer 1

http://api.jqueryui.com/draggable/#option-cancel

$(function() { 
 
  $('.dragElement').draggable({ 
    containment: "parent", 
    cancel: "" // !!! remove default exclusion of input,textarea,button,select,option 
  }); 
 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>jQuery UI</title> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script> 
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css"> 
  <style type="text/css"> 
    #container { 
      border: medium double black; 
      width: 700px; 
      height: 450px 
    } 
  </style> 
</head> 
 
<body> 
  <div id="container"> 
    <p class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;"> 
      Перетащить внутри родителя 
    </p> 
    <p class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;"> 
      Перетащить внутри родителя2 
    </p> 
    <button class="dragElement" style="width:100px;height:100px;background: #80de62;	border: 1px solid black;	font-size:15px;	color:white;">Кнопка</button> 
  </div> 
</body> 
 
</html>