jQuery sürüklenebilir / droppable sorunu

1 Cevap php

Hey çocuklar ben bir sürükle ve bırak işlevi o does not fully work. Ne yapmak istiyorum sürükle ve bırak resim bir div içine ve o resim div açılır olması mümkün değildir. Şu anda 2 resimlerin bir listesi var, bu yüzden aşağıdaki işlev her resim için yankılandı var. Hem resim sürüklenebilir ve droppable, ama birincisi, çünkü jquery function seems to be unique to each picture Ben ne yanlış emin değilim içeri resim sürükledi alır bakılmaksızın, div görünen sadece bir tanesidir. Her biri herhangi bir öneriniz varsa ben çok takdir ediyorum.

while ($row = mysql_fetch_assoc($query)) {

$image=htmlentities($row['image']); //image name

$uniqid=uniqid(); //unique id for jquery functions

$dirname = "usercontent/$user/images/$image"; 

echo "<img id=\"$uniqid\" src=\"$dirname\" width=\"75\" height=\"75\"/>";

echo "<script>
$(function() {
$(\"#$uniqid\").draggable({ scroll: true, scrollSensitivity: 10, scrollSpeed: 10, revert: true, helper: 'clone', cursorAt: { cursor: 'move', top: 27, left: 27 } });
$(\"#droppable2, #droppable-background , #droppable2-innerer\").droppable({
            greedy: true,
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-active',
            drop: function(event, ui) {
                $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
                $('#droppable-background').css(\"background-image\",\"url($dirname)\");
            }
        });
});
</script>";

}

1 Cevap

Bir sürüklenebilir öğe kurmak için kimliği kullanmak istemiyorum, sadece hepsini koymak bir sınıf kullanmak en iyisidir. Yukarıda kod tek bir kimliği kullandığınız görülüyorsa sadece bir resim neden çalıştığını, belki de o? Ve size 3 bırakma bölgeleri kuruyorsanız?

Ben bir working demo kurmak ve ben bu yapılabilir nasıl yardımcı yorumlarına bir demet ekledi.

CSS

#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd;  }
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; }
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; }
.fade { opacity: 0.3 }
.ui-state-highlight { border: #333 1px solid; }

HTML

<div class="demo">

    <div id="draggable" class="ui-widget-content">
        <p>Drag from here</p>
        <div class="dragme"><img src="image1.gif"><br><span class="caption">Drag me to my target</span></div>
        <div class="dragme"><img src="image2.gif" height="100"><br><span class="caption">Drag me to my target</span></div>
    </div>

    <div id="droppable">
        <p>Drop here</p>
    </div>

</div>

Senaryo

$(document).ready(function(){

 // set up the draggable items
 $(".dragme").draggable({
  helper : 'clone',                 // you will drag a copy of the item around
  revert : true,                    // draggable returns home if released
  start: function(e,ui){
   $(this).addClass('fade');        // fade out original item while dragging the clone
   ui.helper.find('.caption').text("I'm being dragged!"); // message in clone
  },
  stop: function(e,ui){
   $(this).removeClass('fade');     // remove fade if dragged item is released
  }
 });

 $("#droppable").droppable({
  drop: function(e, ui) {
   $(this).addClass('ui-state-highlight');            // add drop box highlight (border)
   ui.draggable.appendTo($(this)).removeClass('fade') // move item to drop box & un-fade
    .find('.caption').text("I've been dropped");      // change caption
   ui.helper.remove();                                // remove clone
  }
 });

})

Düzenle: Draggable ve Droppable belge sayfasında özet sayfasında bakarsanız Selam, size eklenti sizin için ekstra değişkenleri (aslında onlar jQuery nesneler) tanımlar olduğunu göreceksiniz: "ui.draggable" seçilen sürüklenebilme eleman & olduğunu "Ui.helper" nesne klonudur.

Ben bunu şimdi açılan kutunun arka plan olarak görüntü yerleştirmek gerekir .. ne talep ile demo güncelledik. Burada komut sadece güncellenmiş kısmıdır:

 $("#droppable").droppable({
  drop: function(e, ui) {
   $(this).addClass('ui-state-highlight');            // add drop box highlight (border)
   var src = ui.draggable.find('img').attr('src');    // get img URL
   $('#droppable')
       .css({
           backgroundImage    : 'url(' + src + ')',   // set background image
           backgroundPosition : 'center center',      // position background image
           backgroundRepeat   : 'no-repeat'           // don't repeat image
       });
   ui.helper.remove();                                // remove clone
  }
 });

etiketler