Question

我在可拖动列表中遇到了droped元素的位置问题。

$(document).ready(function() {
    $('.fw-sidebar li').draggable({
        cursor: "crosshair",
        revert: "invalid"
    });

    function enableDraggable( el ){
        $( el ).draggable({
            containment: ".fw-content",
            cursor: "help",
            grid: [ 80, 80 ]
        }).css('position', 'absolute');
    }


    $(".fw-content").droppable({
        accept: ".fw-sidebar li, .fw-content li",
        drop: function(event, ui) {
            //console.log(event);

            $(this).removeClass("border").removeClass("over");

            var dropped = ui.draggable;
            var droppedOn = $(this).find('ul');

            $(dropped).detach().appendTo(droppedOn);

            enableDraggable( dropped );
        },
        over: function(event, elem) {
            console.log("over");
            $(this).addClass("over");
        },
        out: function(event, elem) {
            $(this).removeClass("over");
        }
    });

});

http://jsfiddle.net/96t0qwmg/2/

我想制作一个可拖动的列表，在容器中放入一些元素，然后将它们排列在网格中。

1）在我的例子中，当我将链接从侧边栏拖放到容器时，它们没有固定在我想要的位置。

2）然后，当我在内容中移动2或3个链接时......他们没有按照预期对齐网格。无法在同一行上对齐两个链接。

任何人都知道我哪里错了？

谢谢！

Answer 1

将功能更改为此

<?php
header("Access-Control-Allow-Origin: http://www.domain.com/angulartest/");

$servername = "localhost";
$username = "XXXXX";
$password = "XXXXX";
$dbname = "XXXXX";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM XXXX";
$result = $conn->query($sql);
while($row = $result->fetch_array(MYSQL_ASSOC)) {
            $myArray[] = $row;
    }
    echo json_encode($myArray);
?>

JsFiddle

删除Jquery Draggable和Droppable上的位置

1 个答案: