1

2 つの div 要素があります。1. div (id="draggable") & div (id="dropper")。それぞれにいくつかの div が含まれています。子をドラッグ可能からドロッパーにドラッグアンドドロップしたい。それをした後、ドロッパーでそれらを動かしたいと思います。これまでのところ、すべてのことを行うことができましたが、最後の部分を達成できません。ドラッグ可能な子はドキュメント全体で移動できるためです。誰でもこれを行うのを手伝ってもらえますか?

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <link href="css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="script/jquery-1.9.0.js"> </script>
    <script type="text/javascript" src="script/jquery-ui-1.10.0.custom.js"> </script>
    <script type="text/javascript" src="script/script.js"> </script>
</head>
<body>

    <div id="draggable" class="drop">
        <h4>Drag From Here</h4>
        <div id="wrapper1" class="floatLeft">item1 </div> 
        <div id="wrapper2" class="floatLeft">item2 </div> 
        <div id="wrapper3" class="floatLeft">item3 </div> 
        <div id="wrapper4" class="floatLeft">item4 </div> 

    </div>

    <div id="dropper" class="drop">
        <h4>Drop'em here</h4>
        <div class="floatLeft">item1 </div> 
        <div class="floatLeft">item2 </div> 
        <div class="floatLeft">item3 </div> 
        <div class="floatLeft">item4 </div> 
    </div>
</body>


#draggable{
height:100px;
border-style:solid;
border-bottom-color:black;
margin-right: 10px;
}


.floatLeft{
    float:left;
    margin:10px 10px 10px 10px;
    border-style:solid;
    border-color: gray;
    cursor: pointer;
}

#dropper{
height: 80px;
/*width: 50%;*/
border-style:solid;
border-bottom-color:black;
margin-right: 10px;
}


$(function(){


$("#draggable").each(function(){

    $("#draggable div").draggable();
}   

);


$("#dropper").droppable(

);

$("#dropper div").draggable({ containment: "parent" });


});
4

1 に答える 1

2

ドロップされた項目がドロップ可能な DOM 構造に自動的に挿入されることを期待しているように思えますが、そうではありません。そして、それがあなたのコードがあなたが望むものを与えない理由です。ただし、探しているものである可能性のあるソート可能なプラグインがあります。ドロップされた div がターゲットの DOM 構造に統合されるという事実により、要件を満たすことが容易になります。

$("#draggable").sortable ({
    connectWith: "#dropper",
    items: "> div"
});
$("#dropper").sortable({
    containment: "parent",
    items: "> div"
});

リンクをクリックして、ソート可能なプラグインを使用する jsfiddle を表示します

于 2013-02-10T16:41:17.797 に答える