Javascript jQuery拖放可排序div无效_Javascript_Jquery_Html_Jquery Ui

Javascript jQuery拖放可排序div无效

javascript jquery html jquery-ui

Javascript jQuery拖放可排序div无效,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我正在尝试使包中的图像容器可以拖动，这样我就可以在通过拖放上传后对图像位置进行排序。下面是示例，但示例不起作用。我已将id=“sortable”添加到jFiler模板中的父div中，并将其添加到my all.js中： $("#sortable").sortable({ containment: "parent", placeholder: "ui-state-highlight" }); 但出于某种原因，它不起作用。这是我的jFiler.j

我正在尝试使包中的图像容器可以拖动，这样我就可以在通过拖放上传后对图像位置进行排序。下面是示例，但示例不起作用。我已将

id=“sortable”

添加到jFiler模板中的父div中，并将其添加到my 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',
                }
            },

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

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

@foreach（$images作为$image）
路径}}“>
@endforeach

但它仍然无法处理由jFiler创建的div。它们与其他非由jFiler创建的div不同，没有获得

ui可拖动ui可拖动ui可拖动句柄ui可拖放属性。
一旦上传了项目，我会尝试运行
刷新可排序项目。触发所有可排序项目的重新加载，从而识别新项目
我不熟悉这个插件，所以猜测一下要使用的函数：
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");
    }
  });
});

$（函数（）{
$（“#可排序”）。可排序({
遏制：“家长”，
占位符：“ui状态突出显示”
});
$（'#上载'）。文件管理器({
限制：空，
maxSize:null，
扩展名：null，
changeInput:“+”，
秀拇指：没错，
附件：'.uploaded_items'，
主题：“默认”，
模板：{
框：“”，
项目：'\
{{fi image}}\\
',
itemAppend:'\
{{fi image}}\\
',
progressBar:“”，
itemAppendToEnd:false，
Remove确认：false，
_选择器：{
列表：'.jFiler项目列表'，
项目：'.jFiler项目'，
progressBar:“.bar”，
删除：'.jFiler项垃圾操作'，
}
},
afterShow:function（）{
$（“#可排序”）。可排序（“刷新”）；
}
});
});
一旦上传项目，我会尝试运行
刷新可排序项目。触发所有可排序项目的重新加载，从而识别新项目
我不熟悉这个插件，所以猜测一下要使用的函数：
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");
    }
  });
});

$（函数（）{
$（“#可排序”）。可排序({
遏制：“家长”，
占位符：“ui状态突出显示”
});
$（'#上载'）。文件管理器({
限制：空，
maxSize:null，
扩展名：null，
changeInput:“+”，
秀拇指：没错，
附件：'.uploaded_items'，
主题：“默认”，
模板：{
框：“”，
项目：'\
{{fi image}}\\
',
itemAppend:'\
{{fi image}}\\
',
progressBar:“”，
itemAppendToEnd:false，
Remove确认：false，
_选择器：{
列表：'.jFiler项目列表'，
项目：'.jFiler项目'，
progressBar:“.bar”，
删除：'.jFiler项垃圾操作'，
}
},
afterShow:function（）{
$（“#可排序”）。可排序（“刷新”）；
}
});
});
您在控制台中看到任何错误吗？其他jQuery UI元素是否正常工作？是否加载了所有正确的jQuery库？您是否有JSFIDLE或其他问题的工作示例？我在控制台中没有发现任何错误。我没有使用任何其他jQuery UI元素，并且这些库似乎正在加载。我没有工作考试还可以，但我会做一个。看看你的脚本顺序，其他JS文件可能有冲突？其他一切都正常，所以我不这么认为。图像是通过Ajax上传的？或者#sortable
中的图像是否在JS加载后出现？如果是后者，你需要更新排序表，以便它知道新的元素您在控制台中看到任何错误吗？其他jQuery UI元素是否正常工作？是否加载了所有正确的jQuery库？您是否有JSFIDLE或该问题的其他工作示例？我在控制台中没有发现任何错误。我没有使用任何其他jQuery UI元素，并且这些库似乎正在加载。我没有工作示例但是，我会做一个。看看你的脚本顺序，其他JS文件可能有冲突吗？其他一切都正常，所以我不这么认为。图像是通过Ajax上传的？或者#sortable中的图像是否在JS加载后出现？如果是后者，你需要更新排序表，以便它知道新元素。我尝试过这个方法，但我得到：jquery.js:253未捕获错误：无法在初始化之前调用sortable上的方法；尝试调用方法“refresh”。这表明sortable未被激活或未在脚本中运行。我们需要查看脚本的更多内容。好的。当页面加载时，选择器有0个元素。因此需要调用sortablee在您至少上传了1个项目后。将更新我的答案以反映这一点。是的，当我将其放入上传的成功部分时，它就起作用了，谢谢！hello@Marco我也遇到了同样的问题。您能分享一下您是如何解决这一问题的吗？谢谢。我已经尝试过了，但是我得到了：jquery.js:253未捕获错误：无法调用上的方法初始化前可排序；尝试调用方法“refresh”。这表示脚本中未激活或运行可排序。我们需要查看脚本的更多内容。好的。页面加载时，选择器有0个元素。因此，您需要在上载至少1个项目后调用可排序。将更新我的答案以反映这一点。是，当我把它放到上传的成功部分时，它工作了，谢谢！你好@Marco我和你有同样的问题。你能分享一下你是如何解决这个问题的吗？谢谢。
      @foreach($images as $image)
        <div class="large-2 columns end dragdiv">
            <img src="http://coop.app/{{ $image->path}}">
        </div>
      @endforeach

$(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");
    }
  });
});