Jquery可以选择所有的lis

时间:2018-06-13 10:56:53

标签: jquery

我有一个ul lis这个ul是可排序的,但当我尝试排序时,选择整个ul而不是lis,请问有什么问题

<button class="rreorder-all btn btn-outline-primary dropdown-toggle" style="margin-left: 10px" id="saveReorder">
  Reorder photos
</button>

<ul class="reorder row" style="    margin-left: 30px">
  <form method="post" id="chk-all" class="row">
    @foreach ($images as $image)
      <li class="img-box" data-src="{{$image->filename}}" id="{{$image->id}}">
        <input type="checkbox" name="chk[]" value="{{$image->id}}" class="chk" style="display: none;">
        <div class="img-w" data-src="{{$image->filename}}" style="background-image: url('{{$image->filename}}')">
         {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
        </div>
        <span style="color: #333333;position: relative;width: 100%;text-align: justify; display: inline;margin-left: 10px;">
          {{$image->description}} 
          <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i>
          {{--<a href="{{route("settings.photos")."?delete=on?id=$image->id"}}">!--}}
          <i class="far fa-trash-alt del1" id="{{$image->id}}" style="margin-left: 10px; color:#333333;cursor: pointer;float:right"></i>
        </span>
      </li>
    @endforeach
  </form>
</ul>
$('.rreorder-all').on('click', function() {
  $("ul.reorder").sortable({
    tolerance: "pointer",
    helper: "clone"
  });

  $('.rreorder-all').html('save reordering');
  $('.rreorder-all').attr("id", "saveReorder");
  $('#reorderHelper').slideDown('slow');
  $("ul.reorder").find('.img-w').attr("data-src", "");
  $("ul.reorder").find('.img-w').css("cursor", "move");

  $("#saveReorder").click(function(e) {
    if (!$("#saveReorder i").length) {
      $(this).html('').prepend('saving...');
      $("ul.reorder").sortable('destroy');
      $("ul.reorder").find('.img-w').css("cursor", "pointer");
      $("#reorderHelper").html("Reordering Photos - This could take a moment. Please don't navigate away from this page.");
      var h = [];
      $("ul.reorder li").each(function() {
        h.push($(this).attr('id'))
      });
      $("#reorderHelper").hide();
      //  alert(h);
.img-w {
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  height: 150px;
  width: 200px;
  margin-left: 10px;
}

.img-box {
  float: left;
}

.clearfix {
  clear: both;
}

.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
  margin-left: 30px;
}

.fa-trash-alt:hover {
  transform: scale(1.5);
}

0 个答案:

没有答案