Wie kann ich erzwingen, jquery zentrieren eines Elements beim ziehen zu und schnappte in einen anderen container?

Möchte ich einige square-shaped draggable-Objekten (in diesem Fall nur <td> Kästen mit zahlen in Ihnen) in der Lage sein zu schnappen, um ein paar leere Zellen in einer Tabelle und ausrichten an der Mitte dieser Zellen (leere td-Boxen), nicht die (äußeren) Rand-jene Zellen, die ist, was ist zu tun scheint, standardmäßig.

Hier ist mein script.:

<script type="text/javascript">
 $(document).ready(function () {
     $(".inputs div").draggable( {
       snap: ".spaces"
     });    
 });    
</script>

EDIT: Hier ist die gesamte Datei

 <!DOCTYPE html>
  <head>
   <title>Draggable</title>
   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
   <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
   <style>
    .block {
        z-index:9999;
        cursor:move;
    }
    li {
        list-style:none;
    }
    tr {
        border: 2px solid black;
    }
    table {
        border: 2px solid black;
    }
    .inputs div {
        float:left;
        background-color:#FFFFFF;
        color:#004E66;
        font-size:x-large;
        margin:2px;
        padding:20px;
        border:1px solid black;
    }
    .spaces td {
        background-color:#666666;
        margin:2px;
        padding:36px;
        border:2px solid black;
    }
 </style>
</head>

<body>
<form id="form1">
  <div class="inputs">
    <div>1</div>
    <div>2</div>
    <div>3</div>    
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  <br/>
  <table class="spaces">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
</form>
<!-- here we are telling jquery to make each element inside of class 'inputs' draggable -->
<script type="text/javascript">
   $(document).ready(function () {
      $(".inputs div").draggable( {
         snap: ".spaces"
      }).center();  
  });   
</script>

Hier ist eine grobe text-basierte Darstellung, was Los ist

-----+---------+ 
XXXXXXXXXXX X| 
| | 
| Y-x| 
| X| 
-----+-------+X| 
| X|

wenn die obige box ist eine td-Zelle in der rechten Ecke des obersten tr Zeile
dann X ist, wo die Elemente sind derzeit kleben (natürlich nicht
großer, ich bin gerade zeigen die Orte, wo es steckt...tatsächlich habe ich entfernt
einige der X ist zu zeigen, wie Sie einrastet, um die Ecke, sobald es erreicht ein
gewisse Nähe zu ihm...)
im Grunde dieses Modell veranschaulicht, dass nur die äußeren Ränder der Tabelle
habe "gravity" mit Bezug auf das draggable-element. Was ich wirklich will es
zu tun ist, rasten in die td-Zellen mit Abstoßung ALLE Kanten, die nicht
mit der Heranziehung zu den externen.
Y die gewünschten snap-Lage für das gezogene element.
Schließlich für die Präsentation der Gründe, warum ich wollen würde, dass das element einrasten
mit einer Art von übergang, anstatt abrupt zu springen...

Wollen Sie die draggable-Elemente werden vertikal zentriert und horizonally innerhalb der tds? Weil Sie nicht passen würde, sehr schön.
4000 views. 9 upvotes auf die richtige Antwort. 4 auf die Frage. moochers. Zeichen in Euch Chaoten!!!

InformationsquelleAutor boulder_ruby | 2012-07-09

11

Ich glaube, das ist, was Sie wollen.

Können Sie natürlich ändern, die Positionierung, wenn Sie wollen, und es zu Ihren Bedürfnissen passt besser.

Demo ist hier: DEMO
```
$(document).ready(function () {


$(".inputs div").draggable( {
        opacity: .4,
        create: function(){$(this).data('position',$(this).position())},
        cursorAt:{left:15},
        cursor:'move',
        start:function(){$(this).stop(true,true)}
   });

     $('.spaces').find('td').droppable({
         drop:function(event, ui){
             snapToMiddle(ui.draggable,$(this));
         }
     });

 }); 


function snapToMiddle(dragger, target){
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}
```
- Oh baby! dies ist in der ersten Betrachtung so weit. danke!
- OK, das ist also nicht auf meinem computer installiert. Ich habe noch nie verwendet, fiddle vor, mein code ist auf dieser Seite (gist.github.com/3095046) genau wie folgt. Bin ich etwas fehlt?
- Die einzige Sache, die scheint anders zu sein, ist Ihre version von jQuery UI. Der jsfiddle verwendet jQuery UI 1.8.18
- In deinem jquery-ui, ich habe es bemerkt hat, "custom", die bedeutet, dass Sie wahrscheinlich nahm ein paar verschiedene Dinge, und dann heruntergeladen, die Dinge, die Sie benötigt. Ich würde vermuten, dass vielleicht mit Ihrem eigenen, die Sie gar nicht abwerfbaren oder sowas?
- Auch in deinem Beispiel, legen Sie Ihre letzten <script></script> - Abschnitt in den html-Kopf... Es wird nicht funktionieren, wenn Sie es nicht haben, dort oben.
InformationsquelleAutor jeschafe

Einen Hinweis auf die snapToMiddle Funktion:

Um es zu bekommen, um richtig zu arbeiten für mich, ich hatte zu ändern, um >

function snapToMiddle(dragger, target){
    var offset = target.offset();
    var topMove = (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.offset({ top: topMove + offset.top, left: leftMove + offset.left })
}

Auch, ich habe ein array, dass die dragger auf den dropper und auf die Fenster die Größe, die ich stellen Sie sicher, dass alle meine Dropper nicht abschweifen:

$( window ).resize(function() {
    for( i = 0 ; i < assc.length - 1 ; i++ )
    {
        var drp = assc[i].drop;
        var drg = assc[i].drag;
        snapToMiddle(drg,drp);
    }
});

Jon Turlington du bist mein Mann!! Irgendeine Idee auf, wie man es animiert genau wie jeschafe Antwort? dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});

InformationsquelleAutor Jon Turlington

1

http://jsfiddle.net/vtdhV/

Erstellte ich ein Turnschuh, die Ihr problem löst .. in gewisser Weise (wenn ich das richtig verstanden habe).

Den roten divs zentriert innerhalb der tds, und Sie rasten auf diese statt. Nur entfernen Sie den Rahmen und es wird angezeigt, um snap zu dem Mittelpunkt der td. Die Natur .draggable verursachen die draggables zu snap auf jeder Kante, anstatt alle Kanten gleichzeitig.

Wenn das nicht genug ist, können Sie implementieren müssen, um einen Ruf-handler für .stop dass passt die position des Elements basierend auf Ihren Erwartungen.
- Vielleicht bin ich nicht richtig, aber während der fiddle-Website zeigt arbeiten code, wenn ich versuche, die code auf meinem computer den web-server werden die Elemente nicht gezogen werden.
- bekommen Sie einen Fehler jeglicher Art? Kopiert habe ich die meisten von Euch.
- Können Sie erstellen ein jsfiddle mit der genaue code?
InformationsquelleAutor Explosion Pills
1

Müssen Sie einen snap-Ziel, das die gleiche Größe wie Ihr element gezogen. Dies ist nicht eine große Sache, wenn Ihre draggables sind immer alle die gleiche Größe. Fügen Sie einfach eine leere, absolut positioniertes div in Ihre Zelle, und richten Sie Ihre CSS so, dass es große und richtig zentriert. Dann stellen Sie Ihre snap - Selektor zu sein, dass div. Nur snap auf der Innenseite des snap Ziel, gesetzt Ihre snapMode zu "inner".
```
$(".inputs div").draggable({
    snap: ".spaces td div",
    snapMode: "inner"
});
```
Aber wenn die Größe des draggables können variieren, müssen Sie die Größe ändern und zentrieren Ihre drop-Ziele jedes mal, wenn Sie ziehen Sie ein element aus. Tun Sie dies auf mousedown des draggable (Verwenden Sie mousedown weil dragstart ist zu spät und funktioniert nicht):
```
$(".inputs div").draggable({
    snap: ".spaces td div",
    snapMode: "inner",
}).mousedown(function(){
    var targets = $(".spaces td div");
    targets.height(this.offsetHeight);
    targets.width(this.offsetWidth);
    targets.each(function(){
        $(this).position({ of: this.parentNode });
    });
});
```
http://jsfiddle.net/gilly3/mPr3A/

InformationsquelleAutor gilly3

Fügen Sie ein div in diesen tds und zentrieren Sie es, indem Sie eine Feste Breite und Höhe für die tds und neu Hinzugefügt divs. Dann Spanne die draggables, um diese divs.

$(document).ready(function () {
    $('<div></div>').appendTo('.spaces td');
    $(".inputs div").draggable({
        snap: ".spaces td div",
        snapMode:'inner'
    });  
});

Auch css-Code für tds und divs wird wie folgt sein.

.block {
    z-index:9999;
    cursor:move;
}

.productCode {

}

li {
    list-style:none;
}
tr {
    border: 2px solid black;
}
table {
    border: 2px solid black;
}

.inputs div {
    float:left;
    background-color:#FFFFFF;
    color:#004E66;
    font-size:x-large;
    margin:2px;
    padding:20px;
    border:1px solid black;
}

.spaces td {
    background-color:#666666;
    width:80px;
    height:80px;            
    border:2px solid black;
}

.spaces td div {
    margin:0 auto;
    width:50px;
    height:70px;
}

Fiddle Demo - http://jsfiddle.net/nsjithin/u25Bs/1/

InformationsquelleAutor Jithin

-1

Wenn ich das problem richtig, ersetzen Sie Ihre aktuelle Skript mit dabei:

$(document).ready(function () {

    //create a bunch of invisible divs
    var divs = $('<div></div><div></div><div></div><div></div>');

    //make them 2/2 and add them to the existing tds
    divs.css({ width:'50%', float:'left' }).appendTo('.spaces td');

    //snap to everything
    $(".inputs div").draggable({snap: ".spaces td, .spaces td div" }).center(); 

});

Wenn ich ihn nicht einfach sagen und ich werde es beheben.

Besser! Es hat jetzt "Attraktion" für den inneren Wänden der Tabelle. Aber es klebt nicht auf der Mitte der Zelle.
Zelle du meinst, TD oder nummerierte box? Auch welchen browser verwenden Sie?
Gibt es eine Methode .center() in jquery oder jquery ui..?

InformationsquelleAutor Silviu-Marian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.