Question

我有两个带有等号图像的文本框。当用户将鼠标悬停在等于图像上时，我需要移动div，否则他无法移动它。

我的意思是用户可以在等号的帮助下移动div。你能帮助我吗？

＆＃13;

$( function() {
    $( "#sortable1" ).sortable({});
    $( "#sortable1" ).disableSelection();
  } );

＆＃13;

.border-bg{
  border: 1px solid #333;
  background-color: #f8f8f8;
  width: 250px;
}
  #sortable1 img, #sortable2 img{
    width: 25px;
    height: 25px;
    vertical-align: middle;
    cursor:move;
  }

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="sortable1">
<div class="border-bg" >
<div class="" >
  <img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Mathematic%20Equal%20sign2.ico">
  <label>name</label>
  <input type="text" name="name" placeholder="name">
</div>
</div>

<div class="border-bg">
<div class="" >
  <img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Mathematic%20Equal%20sign2.ico">
  <label>Email</label>
  <input type="email" name="email" placeholder="email">
</div>
</div>
</div>

＆＃13;

Answer 1

您可以传递带有选择器的可处理选项，如下所示或者为图像使用一些类名并使用它。

$( "#sortable1" ).sortable({
         handle: "img"
    });

如何在使用jquery sortable悬停到子图像时移动父div？

1 个答案: