Question

我尝试使用jquery在我的网站上实现拖放。在谷歌Chrome浏览器下进行测试时，大部分时间都在工作（其工作量的10倍~9倍）。当我大多数时候使用IE11时它不起作用（就像它工作的10次中的1次）。

我尝试在SharePoint 2013网站上实现此功能。

我使用以下代码：

$(window).load(function() {
        $('.draggable').draggable({
            cursor: "move",
            revert: "invalid",
            opacity: 0.7,
            snap: ".droppable",
            snapMode: "inner"
        });
    });

    // Dropzone
    $(window).load(function() {
        $('.droppable').droppable({
          accept: ".draggable",
          hoverClass: 'hovered',
          drop: positioning
        });
    });

    function positioning( event, ui ) {
        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).attr("id");
        updateItemSprintBacklog(droppableId, draggableId);
        window.location = window.location;
    }

    $(window).load(function() {
        $('.droppableDelete').droppable({
            accept: ".draggable",
            hoverClass: 'hovered',
            drop: deleteTicket
        });
    });

我相信window.load有时会加载缓慢，但我不知道为什么。而且我不知道如何解决这个问题。

感谢您的帮助。

Answer 1

感谢您的所有回复。我想我得到了答案。我设置了500毫秒的TimeOut。现在它一直有效。

    setTimeout(function(){
      // Code
    }, 500);

Answer 2

正如@Velimir Tchatchevsky所说，$(window).load不需要多次写，所以你可以这样做：

<script type="text/javascript">

$(window).load(function() {
    $('.draggable').draggable({
        cursor: "move",
        revert: "invalid",
        opacity: 0.7,
        snap: ".droppable",
        snapMode: "inner"
    });

    // Dropzone
    $('.droppable').droppable({
      accept: ".draggable",
      hoverClass: 'hovered',
      drop: positioning
    });

    $('.droppableDelete').droppable({
        accept: ".draggable",
        hoverClass: 'hovered',
        drop: deleteTicket
    });
});

function positioning( event, ui ) {
    var draggableId = ui.draggable.attr("id");
    var droppableId = $(this).attr("id");
    updateItemSprintBacklog(droppableId, draggableId);
    window.location = window.location;
}

</script>

您还可以使用JQuery Document Ready，如下所示：

<script type="text/javascript">

$(function() {
    $('.draggable').draggable({
        cursor: "move",
        revert: "invalid",
        opacity: 0.7,
        snap: ".droppable",
        snapMode: "inner"
    });

    // Dropzone
    $('.droppable').droppable({
      accept: ".draggable",
      hoverClass: 'hovered',
      drop: positioning
    });

    $('.droppableDelete').droppable({
        accept: ".draggable",
        hoverClass: 'hovered',
        drop: deleteTicket
    });
});

function positioning( event, ui ) {
    var draggableId = ui.draggable.attr("id");
    var droppableId = $(this).attr("id");
    updateItemSprintBacklog(droppableId, draggableId);
    window.location = window.location;
}

</script>

Answer 3

它每次都无法正常工作的原因是因为SharePoint需要加载很多脚本文件，有时还取决于你在加载网站之前加载jQuery文件的位置。

所以你可以尝试使用JavaScripts加载而不是像这样的jQuerys：

window.onload = function() {
  //your code
};

或者您需要检查jquery文件是否加载了一个递归函数，该函数检查是否加载了jquery：

(function checkForJquery() {
    if (window.jQuery) {  
        // jQuery is loaded
        // your code here  
    } else {
        // jQuery is not loaded
        checkForJquery();
    }
})();

希望它有所帮助。

$（window）.load并不总是有效

3 个答案: