Question

好吧，我正在尝试做的是使用JQuery在HTML页面中复制相同的功能，从我的数据库中提取页面产品。

目前，在此过程的PHP版本中，您可以通过典型的PHP调用来连接数据库：

<?php

define('INCLUDE_CHECK',1);
require "connect.php";

?>

现在，这个过程的一部分会调用数据库并提取产品并回显出div和img标记，并将信息分配到适当的区域。

<?php

$result = mysql_query("SELECT * FROM internet_shop");
while($row=mysql_fetch_assoc($result))
{
echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
}

?>

现在还有一些其他脚本可以识别这些吐出信息并将工具提示应用于产品并使其可拖动。在PHP页面中完成此操作时，它可以正常工作。

现在我正在尝试让它做同样的事情是在我的html页面中使用.ajax（）调用。

var grbData = $.ajax({
type : "GET",
url : "getRow.php",
dataType: 'html',
success: function (html) {
    $(".product").html(html);
},
error: function (xhr) {
    $('#errorDisplay').html('Error: '+ xhr.status +'' +xhr.statusText);
}
});

我得到了图像，但没有得到可拖动和可放置的效果来应用于这些产品。我没有提供我需要的所有信息吗？

以下是与此过程一起使用的拖放脚本：

$(document).ready(function(){
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}else if (window.ActiveXObject) {
    xhr = new ActiveXObject("sxml2.XMLHTTP");
}else {
    throw new Error("Ajax is not supported by this browser");
}

$(".product img").draggable({

containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100

});

$("div.content.drop-here").droppable({

        drop:
                function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');

                    if($.browser.msie && $.browser.version=='6.0')
                    {
                        param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                        param = param[1];
                    }

                    addlist(param);
                }

});

});

谢谢，

马特

Answer 1

你做的函数调用是为了应用你的ajax调用之前发生的拖放效果..一旦插入了图像，就需要在ajax调用的成功部分重新调用它们

Answer 2

现在还有其他一些脚本认识到这种吐出的信息并将工具提示应用于产品和让它们可以拖拽。

这就是你的问题所在。当所有元素都已存在时，这些脚本可能是在页面加载时启动的。如果你使用AJAX方法填充html（我假设这些脚本是收到的html的一部分），onload事件永远不会触发。您需要做的是找出页面加载时调用的事件，然后再次触发它们。

解决方法可能是使用iframe加载内容而不是AJAX。我不是iframe的忠实粉丝，但在这种特殊情况下，它听起来像是一个快速的解决方案。

Answer 3

对于那些希望看到我前几天在这里发布的这个问题的答案的人，你是：

感谢Simon和malsup，他们让我指出了正确的方向，他们的帮助让我脱离了泡菜。

好的，我错过的是将脚本的相关部分从script.js包装成一个类似的函数：

function initializeDraggableProductImage() {
$(".product img").draggable({

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100
});

$("div.content2.drop-here").droppable({

        drop:
                function(e, ui)
                {
                    var param = $(ui.draggable).attr('src');

                    if($.browser.msie && $.browser.version=='6.0')
                    {
                        param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                        param = param[1];
                    }

                    addlist(param);
                }

});
};

$(document).bind('init-draggable-products', initializeDraggableProductImage);

并将其绑定到文档。

然后在成功电话中回忆起它：

var grbData = $.ajax({
type : "GET",
url : "getRow.php",
dataType: 'html',
success: function (html) {
    $(".drag-desired").html(html);
    $.event.trigger('init-draggable-products');
},
error: function (xhr) {
    $('#errorDisplay').html('Error: '+ xhr.status +'' +xhr.statusText);
}
});

Jquery复制PHP效果

3 个答案: