Question

我正在尝试使包jFiler中的图像容器可拖动，这样我就可以通过拖放操作对上传后的图像位置进行排序。这是full script，但示例不起作用。我在jFiler模板中将id="sortable"添加到父div，并将其添加到我的all.js中：

$("#sortable").sortable({
          containment: "parent",
          placeholder: "ui-state-highlight"
      });

但由于某种原因它不起作用。这是我的jFiler.js：

$('#upload').filer({
            limit: null,
            maxSize: null,
            extensions: null,
            changeInput: '<div class="jFiler-input-dragDrop"><h1>+</h1></div>',
            showThumbs: true,
            appendTo: '.uploaded_items',
            theme: "default",
            templates: {
                box: '<div class="jFiler-item-list" id="sortable"></div>',
                item: '<div class="jFiler-item img-container">\
                            {{fi-image}}\<div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a>\
</div></div>',
                itemAppend: '<div class="jFiler-item img-container dragImg">\
                            {{fi-image}}\<div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a>\
</div></div>',
                progressBar: '<div class="bar"></div>',
                itemAppendToEnd: false,
                removeConfirmation: false,
                _selectors: {
                    list: '.jFiler-item-list',
                    item: '.jFiler-item',
                    progressBar: '.bar',
                    remove: '.jFiler-item-trash-action',
                }
            },

上传后，它会创建如下所示的html：

<div class="uploaded_items">
   <div class="jFiler-items jFiler-row">
      <div class="jFiler-item-list" id="sortable">
         <div class="jFiler-item img-container" data-jfiler-index="3" style="">
            <div class="jFiler-item-thumb-image"><img src="http://myApp.app/imagecache/thumb/bear_PNG1190.png" draggable="false"></div>
            <div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></i></span></a></div>
         </div>
         <div class="jFiler-item img-container" data-jfiler-index="2" style="">
            <div class="jFiler-item-thumb-image"><img src="http://myApp.app/imagecache/thumb/bear_PNG1189.png" draggable="false"></div>
            <div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></i></span></a></div>
         </div>
         <div class="jFiler-item img-container" data-jfiler-index="1" style="">
            <div class="jFiler-item-thumb-image"><img src="http://myApp.app/imagecache/thumb/bear_PNG1188.png" draggable="false"></div>
            <div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></i></span></a></div>
         </div>
         <div class="jFiler-item img-container" data-jfiler-index="0" style="">
            <div class="jFiler-item-thumb-image"><img src="http://myApp.app/imagecache/thumb/bear_PNG1183.png" draggable="false"></div>
            <div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></i></span></a></div>
         </div>
      </div>
   </div>
</div>

我按照以下顺序调用我的脚本：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
  <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/datepicker/datepicker.js') }}"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
  <script src="{{ asset('js/moment/moment.js') }}"></script>
  <script src="{{ asset('js/charts.js') }}"></script>
  <script src="{{ asset('js/all.js') }}"></script>

更新的代码：

我也用过这个：

$(".dragdiv").each(function(){
            makeElementAsDragAndDrop($(this));
        });

        $('.images-refresh').hide();
        $('.images-refresh').click(function(){
            $(this).closest("form").submit()
        });

        function makeElementAsDragAndDrop(elem) {
            $(elem).draggable({
                revert: "invalid",
                cursor: "move",
                helper: "clone"
            });
            $(elem).droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function(event, ui) {
                    $('.images-form a').hide();
                    $('.images-refresh').show();
                    var $dragElem = $(ui.draggable).clone().replaceAll(this);
                    $(this).replaceAll(ui.draggable);
                    makeElementAsDragAndDrop(this);
                    makeElementAsDragAndDrop($dragElem);

                }
            });
        }

这对于不是用jFiler创建的元素很有效，就像我在编辑表单中创建的元素一样：

      @foreach($images as $image)
        <div class="large-2 columns end dragdiv">
            <img src="http://coop.app/{{ $image->path}}">
        </div>
      @endforeach

但它仍然无法使用由jFiler创建的div。它们与jFiler不创建的其他div不同，不会获得ui-draggable ui-draggable-handle ui-droppable属性。

Answer 1

我会尝试在上传项目后运行refresh()。

刷新可排序的项目。触发重新加载所有可排序项目，从而导致识别新项目。

我不熟悉这个插件，所以猜测要使用的功能：

<强>的jQuery

$(function() {
  $("#sortable").sortable({
    containment: "parent",
    placeholder: "ui-state-highlight"
  });
  $('#upload').filer({
    limit: null,
    maxSize: null,
    extensions: null,
    changeInput: '<div class="jFiler-input-dragDrop"><h1>+</h1></div>',
    showThumbs: true,
    appendTo: '.uploaded_items',
    theme: "default",
    templates: {
      box: '<div class="jFiler-item-list" id="sortable"></div>',
      item: '<div class="jFiler-item img-container">\
                            {{fi-image}}\<div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a>\
</div></div>',
      itemAppend: '<div class="jFiler-item img-container dragImg">\
                            {{fi-image}}\<div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a>\
</div></div>',
      progressBar: '<div class="bar"></div>',
      itemAppendToEnd: false,
      removeConfirmation: false,
      _selectors: {
        list: '.jFiler-item-list',
        item: '.jFiler-item',
        progressBar: '.bar',
        remove: '.jFiler-item-trash-action',
      }
    },
    afterShow: function() {
      $("#sortable").sortable("refresh");
    }
  });
});

jQuery拖放可排序的div不起作用

1 个答案: