Question

我对JqueryUI的拖放功能有疑问，由于已经完成了此验证，因此我只想知道如何获取订单号ID的值放下。

这样的情况是，如果将拖动的项目扔到“ 1”放置框，则“ 1”放置框将确定这是什么订单号，是＃301764337吗？

我将向您展示我已经完成的应用程序以及为此的功能。

我的代码：

    $(document).ready(function(){

  $(".drag-wrapper").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone'
  });

  $("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".drag-wrapper",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      // $("#launchPad").append($(ui.draggable));
    }
  });

  $(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".from-launch",
    revert: 'invalid',
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      ui.draggable.removeClass("from-launch").addClass("from-kitchen");
      $(this).append($(ui.draggable));

      console.log('In the kitchen');
      var x = $('button#gather_customer_order').val();

      alert(x);

    }

  });


  $(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".from-kitchen",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {

      $(this).append($(ui.draggable));
      console.log('On the road');
    }
  });

    $(".stackDrop3").droppable({
    tolerance: "intersect",
    accept: ".from-kitchen",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      ui.draggable.removeClass("from-kitchen").addClass("from-kitchen2");
      $(this).append($(ui.draggable));
      console.log('Completed');
    }
  });



});

我的HTML：

@foreach($customer_orders_details as $transac_details)
                    <div class="drag-wrapper from-launch" >
                        <div class="card" style="opacity: 0.8" id="addStyleHover">
                            <div class="card-body" style="font-weight: bold; text-align: center;" >
                                <h5 class="card-title" style="text-align: center;">
                                    <i class="far fa-user-circle" style="font-size:30px;"></i>
                                    <br><br>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300; color:black !important; font-family: 'Open Sans';" id="get_drag_ordernumber">OR # {{$transac_details->or_number}}</h6>
<input type="hidden" class="get_drag_ordernumber" value="{{$transac_details->or_number}}" name="">
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: bold; color:black !important;">Customer: {{$transac_details->customer_name}}</h6>
                                    <h6 class="card-subtitle mb-2 text-muted" style="color:black !important;">Driver: {{$transac_details->driver_name}}</h6><br>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Address: {{$transac_details->order_ship_address}}</h6>
                                    <h6 class="card-subtitle mb-2 text-muted" style="font-weight: 300;">Contact #: {{$transac_details->customer_number}}</h6>
                                    <p class="card-text">Total:${{$transac_details->amount}}</p>

                                    @if($transac_details->driver_name != "")
                                        {{-- <button href="#" data-order-id='{{$transac_details->order_id}}' data-customer-id='{{$transac_details->customer_id}}' style="" data-toggle="modal" data-target="#driver_assign" id="assign_btn" type="button" class="card-link btn btn-primary">Assign</button> --}}
                                    @else
                                        <button href="#" data-order-id='{{$transac_details->order_id}}' data-customer-id='{{$transac_details->customer_id}}' style="" data-toggle="modal" data-target="#driver_assign" id="assign_btn" type="button" class="card-link btn btn-primary">Assign</button>
                                    @endif

                                    <button href="#" class="card-link btn btn-outline-warning" id="gather_customer_order" data-order-id='{{$transac_details->order_id}}' data-customer-id='{{$transac_details->customer_id}}' style="" data-toggle="modal" data-target="#customer_detail_delivery">Details</button>

                                </h5>
                            </div>
                        </div>
                    </div>

                @endforeach

更新：

但是，当我拖动要推送的order_number项目时，我已经得到了值，这是为什么呢？我只是将其添加到foreach中，然后在函数中声明变量以获取隐藏值，然后对其发出警报。

<input type="hidden" class="get_drag_ordernumber" value="{{$transac_details->or_number}}" name="">

如何将ID值拖到可放置对象

0 个答案: